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Calcomp plotter. The smoothness of the lines obtained in these illustra- 
tions is achieved because the BBC notional coordinate system (1280 x 
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Preface 


Computer graphics is one of the most rewarding areas of program- 
ming. This is hardly surprising considering that the predominant 
human sense is sight. It is natural that the use of graphical displays 
provides the most effective means of communication between com- 
puter and human user. 

Once confined to wealthy research establishments, elaborate colour 
graphic displays are now commonly available on the humblest micro- 
computer. The BBC Micro and Electron are particularly well endowed 
with graphics facilities and they enable a microcomputer programmer 
to use some of the most advanced graphics programming techniques 
currently available. The aim of this book is to make these techniques 
accessible and to examine some interesting applications. 

As well as the standard fundamental techniques, such as two- and 
three-dimensional transformations, the book features extensive 
coverage of a number of interesting and unusual application areas 
including innovative material developed by the authors. 

On the conventional side, topics covered include: structured 
programming in computer graphics; interactive graphics and the 
design of CAD programs; two-dimensional linear and non-linear 
manipulations; three-dimensional linear and non-linear manipula- 
tions; three-dimensional data representation and input; full hidden 
surface removal; and mathematical patterns. 

More unusual application areas discussed are: design and genera- 
tion of wallpaper and frieze patterns; interactive tesselation art; recur- 
sive and natural patterns; three-dimensional decorative techniques; 
and a systematic approach to computer-generated art. 

The text and programming techniques should be comprehensible to 
anyone with a little experience on the BBC Micro or Electron. 
Mathematical techniques are treated using a ‘recipe’ approach and the 
formulae presented can be used without a detailed understanding of 
the derivation or theory. 


Sheffield Jim McGregor 
August 1984 Alan Watt 
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1 Computer calligraphy and 
program structure 


We define calligraphy as artistic script produced with a brush or 
pen, and a calligraphic facility in a computer display is a mechanism 
that allows us to imitate this process with a program. 

When we are writing or drawing with a pen on paper we either 
move the pen on the paper making a visible line, or move the pen off 
the paper to draw a line froma new position. In a computer program 
we can imagine a spot that either moves leaving a trace or trail, or 
just moves its position. The spot is exactly equivalent to our pen 
point. 

In a BASIC program we use the command DRAW when. visible 
line is to be drawn, and MOVE when we simply want to move the 
spot. This chapter deals with these basic facilities, elaborations of 
them and how program structures are used to control these facilities 
to build up a computer image. We shall start by explaining how 
raster displays work. A rudimentary understanding of the hard- 
ware details will greatly assist your general understanding of com- 
puter graphics. 


1.1 RASTER SCAN DISPLAYS 


It is unlikely that the explosive growth in home microcomputers 
would have come about without colour graphics display facilities. In 
the first half of the decade, beginning around 1980, the raster scan 
colour display system reigns supreme and is the most common 
method in use for displaying computed information. It is so 
culturally universal that a large majority of computer users will not 
have experience of any other device, with the possible exception of 
the line printer. 

One of the predominant factors in the rapid growth in popularity 
of home microcomputers is the availability of arcade games, and 
these of course rely heavily for their popularity on fast and convinc- 
ing graphics. The tremendous impact of video games on popular 
culture is difficult to overestimate. When one particular game 
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Figure 1.1 
A typical screen from a game 
of the ‘defenders’ family 


reaches its zenith of popularity it becomes the progenitor of a new 
generation of games that exploit yet another graphics trick. 
Something of the madness that infects millions of arcade game 
fanatics can be gleaned from the following quotation from ‘The 
winner's book of video games’ by Craig Kubey, published in 1982. 


‘Most of them are what one would expect in any war that engages 
millions of soldiers: they are young men. Still, this is an all out 
Armageddon and, more and more, the young men are being 
joined by women of all ages, by mere children, and by men of 
middle age and beyond. Who are these warriors, these 
courageous fighters defending their nations and loved ones 
against onslaughts from across the ocean and from the far 
reaches of the galaxy? They are the men and women who com- 
mand the control panels of today’s video games. Yes, they're 
called games. But games seems the wrong word to describe a 
phenomenon never before seen on the planet Earth. Games is 
fine for hopscotch and checkers. But not for these machines 
called Asteroids, Space Invaders, Defender, Missile Command, 
Pac-man, Galaxian, Phoenix, Star Castle, Scramble, Armor 
Attack, Battlezone, Centipede, Berzerk and Gorf.’ 


Arcade games are basically reaction games (‘dialogue’ games such 
as the Adventure family and strategy games like chess do not seem 
to have reached the same level of popularity). A reaction game is a 
graphics display that changes under preplanned program control as 
well as keyboard control. In a common family of games a landscape 
moves from right to left at a rate determined by a key. Anillustration 
of the game Defender is shown in Figure 1.1. A (stationery) space- 
ship then appears to move. As well as controlling the rate at which 
the landscape moves the keyboard may cause the spaceship to move 
up and down (gaining and losing height as it ‘moves’) as well as the 
usual menu of firing guns, dropping bombs etc. 


SCORE: WWO8O:2 
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The popularity of such games depends almost entirely on the 
quality of the display produced. The complex and fast graphics they 
require has only become available in the mass market since the drop 
in cost of mass semiconductor memory. 


Screen memory organisation 

Ina raster scan display a picture or image on the screen is organised 
as a collection of individual elements called pixels (short for picture 
elements or cells). The number of pixels that the screen is divided 
into determines the accuracy or resolution to which we can draw 
pictures. Information about the colour of each pixel is stored in a 
memory variously called a refresh buffer memory, screen memory 
or frame buffer. (We prefer the term screen memory.) The contents 
of the screen memory is just the image in a different form. For a 
black and white or on/off image we need only store a 1 or a 0 (1 bit) 
for each pixel. This scheme is illustrated in Figure 1.2. 

The image on the screen is created by hardware called the display 
controller that repeatedly scans this memory and brightens up 
corresponding points on the screen — see Figure 1.3. 

The devices are called raster scan displays because the display 
controller scans the screen memory row by row, each row corre- 
sponding to a horizontal band or line on the display screen. The 
stream of bits that comes out of the memory is converted into a 
continuous or analogue signal that controls the beam intensity as it 
moves synchronously with the screen memory scanning process. 

If we want each pixel to be one of say four different colours then 
instead of one bit of screen memory per pixel we need two bits. 
(With a two bit code we can store four bit-patterns — 00, 01, 10 and 11 
~ that can be used to represent four colours.) This is shown in Figure 


Display 


Screen memory Display screen 


Figure 1.2 

Each pixel on the screen is 
represented by a location in 
the screen memory 


Figure 1.3 

Display controller repeatedly 
scans the screen memory 
producing a display 
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Figure 1.4 
Four colours can be produced 
from a 2 bit/pixel memory 


1.4. For reasons that will become apparent later it is sometimes 
better to think of using the memory as a series of overlying planes. 
This is shown in Figure 1.5. There is no difference in effect between 
the organisation shown in Figure 1.4 and that in Figure 1.5. They are 
different ways of visualising the same memory organisation. 

Now with a fixed screen memory (total amount of bits available) it 
will be apparent that there is a trade urf between the resolution of 
the image we can draw on the screen (or store in the screen memory) 
and the number of colours that each pixel can be. The screen 
memory organisation in the BBC Micro and the Electron is shown in 
Table 1.1. 


Table 1.1 BBC Micro/Electron screen memory organisation 


MODE Resolution Colours per Screen memory 
pixel requirement 
0 640 x 256 2 640 256x1 
(20 Kbytes) 
1 320x256 4 320 256X2 
(20 Kbytes) 
2 160256 16 160x256x4 
(20 Kbytes) 
4 320X256 2 3202561 
(10 Kbytes) 
5 160X256 4 160 256x2 
(10 Kbytes) 


For a given memory size, the more colours in the image the lower 
the spatial resolution. 
The connection between raster scan displays and arcade games 


4 colour display 
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(apart from low cost) is speed. Since the complete image is stored in 
the screen memory, to change part of the image (as we do in game 
animation) we simply change the requisite parts of the screen 
memory. The image is stored in its final primitive form in the screen 
memory and this enables fast animation. 


Monitor resolution 

This is not the whole story as far as spatial resolution is concerned. 
As we have seen, the highest resolution image that we can store in 
the screen memory is 640X256 pixels. It may well be that the 
monitor is incapable of displaying that spatial resolution. The spa- 
tial resolution of a monitor depends not only on the number of red, 
green, blue triads on the screen but the bandwidth of the electronics 
through which the signal from the display controller passes. The 
commonly available monitors have spatial resolution around 430 
horizontally by 260 vertically, so you can see that in MODE 0 the 
image displayed on such a monitor is at a somewhat lower resolu- 
tion (horizontally) than the image stored in the screen memory. 


1.22 DRAWING AND MOVING 


In this section we look at ways of loading information into the screen 
memory so that an image appears on the display screen. Three 
software mechanisms are widely used to access the screen memory. 
First, and probably the most common, is to use BASIC utilities to 
cause ‘lines’ to be ‘plotted’ on the display screen, and it is this 
mechanism that concerns us here. The other two methods are to use 
BASIC utilities to cause ‘characters’ to be ‘printed’ on the screen and 
to access the screen memory directly via an assembly code program. 
Both these mechanisms are used in arcade game programming. 

In all microcomputer graphics systems a moving and drawing 
facility is available. In the BBC Micro and Electron the two basic 
calligraphic facilities used to draw straight lines on the screen are 


10] 
10/010/1/1]1/0]010} 
10/010/111]7 [oo /o| 
10[0/0/1/7/1/90/0/0| 
lofolo[1{7} 10/0 [o} 
(oo /0/0/0}0/0/0{0} 


Screen memory seen as 
separate overlay planes 


Soi Figure 1.5 
2 bit screen memory shown 
4 colour display as 2 bit planes 
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Figure 1.6 
A line appears on the screen 
as a series of steps 


10 MODE 0 
20 VDU 29,640;512; 


DRAW and MOVE. These are used in conjunction with a screen 
coordinate system (0-1279 horizontally by 0-1023 vertically — ex- 
plained in the next section). DRAW and MOVE use a destination 
point explicitly, together with a current position (CP) implicitly. 
Thus: 


10 MOVE 640, 512 
sets the current position to the centre of the screen, and 
20 DRAW 1279, 1023 


draws a line from the centre of the screen, the current position, to 
the top right hand corner. After line 20 has been executed 
(1279,1023) becomes the CP. Program 1.1 is a short program that 
draws a rectangle. You can see that the sequence of instructions 
executed by this program are analogous to the sequence of opera- 
tions that you would perform when drawing a line on a piece of 
paper. 

Program 1.2 draws a parallelogram instead of a square. You can 
see that the sloping lines are drawn as a series of steps. Remember 
that eventually the effect of the program is to switch on or colour 
individual pixels. Behind the scenes an operating system utility 
converts the line drawing command into a series of pixels selected 
‘nearest’ to the line. (Figure 1.6) This process results in the charac- 
teristic steps whose noticeability depends on the slope of the line. 

There are applications where the programmer wants to alter 
individual pixels in the screen memory, but when using DRAW he 
simply specifies a destination point and the computer decides the 
best pixels to switch on between the CP and the destination point. 

The above of course refers only to straight lines. How do we draw 
curves? Curves are drawn by approximating them with short 


MOVE 0,0 
DRAW x,y 


> 


0,0 


Notional line 
Actual line 


30 MOVE 200, 200: DRAW -200, 200 
40 DRAW -200,-200: DRAW 200, -200 


50 DRAW 200, 200 


Program 1.1 Draws a square. 
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10 MODE 0 

20 VDU 29,640;512; 

30 MOVE 300, 300 : DRAW -200, 200 
40 DRAW -300,-300 : DRAW 200, -200 
50 DRAW 300, 300 


Program 1.2 Draws a rectangle. 


straight line segments produced by the DRAW facility. The shorter 
the line segments are the better do they approximate the curve. This 
technique is illustrated in Figure 1.7 where a circle is drawn using 
six, 12, 24 and 36 line segments. There is an obvious improvement in 
going from six line segments to 12 line segments. There is little or no 
improvement in going from 24 to 36. Here we are up against the 
resolution of the system. The slope and length of a line segment may 
be such that it does not cross a pixel boundary. This noticeable effect 
is characteristic of low resolution display systems and limits the 
implementation of complex line images. 


Screen coordinates 

The screen is organised into a two-dimensional array of pixels at a 
particular spatial resolution that depends on the mode selected. We 
specify points on the screen by using (x,y) coordinates. The question 
now is: what values of (x,y) correspond to a particular pixel? The 
answer to this may seem rather unusual but we shall explain the 
reason for it. The screen coordinate system used in a BASIC pro- 
gram is completely independent of mode and is a notional or imaginary 
system of 1280 1024, with (0,0) in the bottom left hand corner. Thus 
to refer to a point in the top right hand corner of the screen we would 
use (1279,1023). To refer to a point at the centre of the screen we 
would use (640,512). These coordinate addresses can be used in any 
of the graphics modes: 0,1,2,4 and 5. The display software then 


Figure 1.7 
A circle drawn by using 6, 12, 
24 and 36 line segments 
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Figure 1.8 
Pixel organisation in different 
modes 


internally scales a point in the notional coordinate system into the 
mode system with a reduction in spatial resolution that depends on 
the mode selected. Thus the programmer always works in a 
12801024 system and the display software rescales the program 
coordinates into the mode coordinates according to whatever mode 
is being used. The physical size of a pixel on the screen depends on 
mode number. In MODE 0 (640X256) the following program coordi- 
nates will refer to the same pixel — the one in the top right hand 
corner. 


1278,1023 1279,1023 
1278,1022 1279,1022 
1278,1021 1279,1021 
1278,1020 1279,1020 


Thus executing the following will cause only one pixel to light up: 


PLOT 69, 1278, 1023 
PLOT 69, 1279, 1023 
PLOT 69, 1278, 1022 
PLOT 69, 1279, 1022 
PLOT 69, 1278, 1021 
PLOT 69, 1279, 1021 
PLOT 69, 1278, 1020 
PLOT 69, 1279, 1020 


(PLOT is explained below and PLOT 69, x, y means plot a single 
point at (x,y).) Conversely executing any one of these statements 
causes the same pixel to light up. You can see from this that in 
MODE 0 there are eight pairs of program coordinates referring to 


1 pixel is 
MODE 0: 640 X 256 
8 points/pixel 

1 pixel is 
MODE 1 : 320 X 256 
16 points/pixel 
(also MODE 4) 

1 pixel is 


MODE 2: 160 X 256 
32 points/pixel 
{also MODE 5) 
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10 FOR mode = 0 TO 2 
20 MODE mode 

30 = =PLOT 69, 640, 512 
40 keypress = GET 

50 NEXT mode 


Program 1.3 Plots a pixel in different modes. 


one screen pixel. Similarly in MODE 1 (320256) there are 16 pairs of 
program coordinates for each screen pixel. To refer to a screen pixel 
only one pair of program coordinates for that pixel needs to be used. 

The reason for doing things this way is that a program can be run 
at different resolutions by simply changing the MODE statements. 
A program that runs in MODE 1 will run in MODE 0 at a higher 
resolution because the same notional coordinate system has been 
used in both cases. The shape of graphics images will be preserved 
(subject of course to the limitation that changing resolution does in 
itself result in a shape change). 

The pixel geometry with respect to the MODE resolution is shown 
in Figure 1.8. To demonstrate the changing pixel geometry try 
running Program 1.3. 


The PLOT statement family 

In BBC and Electron graphics, certain extensions are possible to the 
basic MOVE and DRAW facility. The PLOT statement is a multi- 
purpose line and point plotting procedure family. MOVE and 
DRAW are the abbreviated forms of two members of that family. 
The complete set of PLOT facilities incorporates relative plotting, 
dotted line plotting, single point plotting as well as MOVE and 
DRAW. In relative plotting instead of stating a destination point for 
line plotting we state a horizontal and vertical displacement relative 
to the CP. This scheme is shown in Figure 1.9. The utility of relative 
coordinates will become clear later. 


PLOT 5, 110, 120 PLOT 1, 10, 20 
20 
cP 
CP (100,100) 
10 
Absolute line Relative line 
drawing drawing 


Figure 1.9 
Absolute and relative line 
drawing 


9 


10 — Art of microcomputer graphics 
The complete PLOT statement is of the form: 
PLOT k, x, y 


and this plots to a new point specified by x and y. The type of 
plotting that takes place is determined by the value of k. The 
simplest uses of PLOT involve values of k from 0 to 7: 


k=0 Move relative to the last point. ‘Move’ means don’t plot 
a visible line. 


k=1  Drawailine relative to the last point in current graphics 
foreground colour. 


k=2 _ As1 but in logical inverse colour (this is not necessarily 
the background colour - see Appendix 2). 


k=3 As 1 but in current background colour. 
Options 0 to 3 are relative plotting commands. Values of k from 4 to7 
have the same effect as 0 to 3 but absolute coordinates are quoted. 
k=4 Move to (x,y). Equivalent to MOVE x, y. 


k=5  Drawacontinuous line to (x,y). Equivalent to DRAW x, 
y. 
As 5 but in logical inverse colour. 


ll 
NO 


k= As 5 but in the current background colour. 


Higher values of k have other effects. The higher values are made 
up of a base value that selects a plotting effect plus one of the values 
0 to 7 that modify that effect as we have already described. For 
example the base value 64 means plot a single point. We saw above 
that k = 5 means plot to a point whose absolute coordinates are 
given. Thus k = 64 + 5 = 69 means PLOT a single point at a 
specified absolute position. This is the PLOT 69 facility that has been 
informally introduced already. Similarly k = 64 + 1 means plot a 
single point at a position specified relative to the current position. In 
other words the series of PLOTs based on the value 64 differ in effect 
from those based on 0 by only plotting the last point on the line 
connecting the current and next points. The most useful base values 
are 


0 for plotting lines 
16 for plotting dotted lines 
64 for plotting single points 
80 for filling a triangular area with colour (see below) 


Other values will be introduced, as required, in subsequent chap- 
ters. The value of having a relative plot facility will become obvious 
later as will plotting in logical inverse and current background 
colour. If we were drawing a single line from say (640,512) to 
(940,812) we could either use 


Computer calligraphy and program structure 


PLOT 4, 640, 512 
PLOT 5, 940, 812 


which uses absolute coordinates to establish both the start and the 
finish of the line; or we could use 


PLOT 4, 640, 512 
PLOT 1, 300, 300 


which uses absolute coordinates to establish the start of the line and 
relative coordinates to draw to the end of the line. Because PLOT 4 
and PLOT Sare likely to be the most commonly used PLOT facilities, 
these can be written as: 


MOVE x, y (PLOT 4, x, y) 
DRAW x, y (PLOT 5, x, y) 

Thus all of the following have exactly the same effect: 
PLOT 4, 640, 512 MOVE 640, 512 
PLOT 5, 940, 812 DRAW 940, 812 
PLOT 4, 640, 512 MOVE 640, 512 
PLOT 1, 300, 300 PLOT 1, 300,300 


1.3 PROGRAM STRUCTURES AND LINE IMAGES 


In the next few sections we will demonstrate the use of appropriate 
programming structures in controlling the PLOT facilities to build 
up computer line images. A very few control statements or com- 
binations of control statements will cover most graphic applications 
and throughout this text we will be exploiting those features of BBC 
BASIC that enable transparent or readable programs to be written. 
This means making extensive use of the procedure facility which 
enables a structured programming approach. 


Deterministic loops — FOR statements 
The FOR statement control structure is used to repeat an operation 
or a series of operations a predetermined number of times. One of 
the most common graphics applications of this structure is generat- 
ing an approximation to a curve by drawing a number of short line 
segments. For example to generate the circles shown in Figure 1.7 
above we would use Program 1.4. This program generates a ‘circle’ 
by plotting a regular polygon of 36 sides. 

It uses a ‘polar coordinate’ system — a point is represented by the 
two values r and theta, and we convert r and theta into cartesian 
coordinates, x and y, using: 


x = r cos(theta) 
y = r sin(theta) 


Increments in ‘theta’ result in new (x,y) coordinates, one (x,y) pair 
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10 MODE O 
20 VDU 29,640;512; 
30 r = 200: MOVE r,0 


40 FOR theta = 0 TO 360 STEP 10 
50 =x = reCOSCRAD(theta)): y = r*SINCRAD(theta)) 


60 DRAW x, y 
70 NEXT theta 
80 END 


Program 1.4 Draws a circle. 


Figure 1.10 
Polar coordinate system 


for each vertex on the polygon as shown in Figure 1.10. 


Nested FOR statements 

A common structure that is a development of a simple FOR state- 
ment is a nested FOR statement. Here one FOR statement is 
contained or nested within another. Program 1.5 demonstrates this 
structure. The outermost FOR statement controls the position at 
which the object (or circle) is drawn. The innermost FOR statement 
controls the drawing of a single circle. The output from this program 
is shown in Figure 1.11. 


Non-deterministic loop - REPEAT UNTIL 


A non-deterministic loop is a loop control structure that causes the 
repetition of statements within the loop body until the terminating 


r sin{theta) 


r cos(theta) 
(xc + x2, yc + y2) 
(xc + x1, ye + y1) 
y2 
y1 
(xc, ye) 
SS 
x2 
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10 MODE 0 
20 INPUT sx, sy, r 


30 xc = sx : ye = sy 

40 MOVE xc + r, yc 

50 FOR theta = 10 TO 360 STEP 10 

60 x = rexCOSCRAD(theta)): y = r*xSINCRAD(theta)) 
70 = DRAW xc + x, yc t+ y 

80 NEXT theta 


90 FOR circle = 0 TO 320 STEP 60 

100 xc = sx + rexCOSCRAD(circle)) 

110 yc = sy + r*SINCRAD(circle)) 

120 MOVE xc +r, ye 

130 FOR theta = 10 TO 360 STEP 10 

140 x = reCOSCRAD(theta)): y = r*SINCRAD(theta)) 
150 DRAW xc + x, yc t+ y 

160 NEXT theta 

170 NEXT circle 


Program 1.5 Draws a pattern of six circles whose centres lie on the circumference of a central circle. 


condition is TRUE. The commonest graphics application of this 
structure is in drawing a line image, from a list of (x,y) coordinates, 
contained in a file or in a set of DATA statements. Program 1.6 
demonstrates the idea. Figure 1.12 shows an image generated by 
Program 1.6. Again the image is drawn as a series of short line 
segments representing curves. This time the endpoints of the line 
segments are not calculated but are contained in a file. (The coordi- 
nates contained in the file were produced using a digitiser as de- 
scribed in Chapter 2.) 

Now because the line image is made up by both DRAWing and 
MOVEing we need three codes to represent each point in the line 
image. Two integers are the (x,y) coordinates and the other data 


Figure 1.11 
Output from Program 1.5 
(nested FOR statements) 
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Figure 1.12 

Output from Program 1.6: an 
image generated from a 
REPEAT-UNTIL structure 


item is a control code (4 or 5) that makes the program execute a 
MOVE or a DRAW to the point (x,y). A neater way of handling this 
is to use the three parameter form of MOVE (PLOT 4, x, y) and 
DRAW (PLOT 5, x, y). This is is preferable to using an IF-THEN- 
ELSE statement. 


Procedures 

Procedures are used in general to make the development of a 
program easier and to enhance its readability. If we take the nested 
loop structure of Program 1.5 and define the innermost loop as a 
procedure PROCdrawacircle then the program is much easier to 
read. Also it may be that in a longer program we may want to draw a 
circle in many positions. Clearly it makes sense in this context to 
encapsulate those instructions that draw the circle inside a separate 
program module and refer to this module when required. Program 
1.7 incorporates this idea. The operation of drawing a circle is now 
referred to in the (main) program as a named module —a procedure — 
and the definition of that module is contained elsewhere as a pro- 
cedure definition. In graphics programming the use of procedures is 
very natural. Often complex images are made up of sub-images. For 
example the front elevation of a house may be a rectangle containing 
a door and four windows. It is natural and transparent to implement 
the sub-pictures as procedures. The structure of the picture or image 
is then reflected in the structure of the program. 


Nested procedures — image hierarchy and complexity 

A rather more convincing demonstration of the utility of procedures 
is contained in Program 1.8 that produces the apparently complex 
image shown in Figure 1.13. An examination of this program will 
show that it is hierarchical in nature. There are various levels of 
procedures reflecting the hierarchy in the image. Only those pro- 
cedures at the bottom of the hierarchy contain MOVE and DRAW 
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10 CLS 

20 INPUT "File name",file$ 
30 MODE 0 

40 fi le=OPENUP(file$) 

50 REPEAT 

60 INPUT£ file,plotop,x,y 
70 = PLOT plotop,x,y 

80 UNTIL EOF£ file 

90 END 


10 MODE 0 

20 INPUT sx, sy, r 
30 xc = sx : yc = sy 
40 PROCdrawcircle 


50 FOR circle = O TO 320 STEP 60 


60 xc = sx + r*COSCRAD(circle)) =: yc = sy + r*SINCRAD(circle)) 


70 PROCdrawcircle 
80 NEXT circle 
90 END 


100 DEF PROCdrawcircle 

110 MOVE xc + r, yc 

120 FOR theta = 10 TO 360 STEP 10 

130 x = reCOS(RAD(theta)): y = r*SINCRAD(theta)) 
140 DRAW xc + x, ye + y 

150 NEXT theta 

160 ENDPROC 


Program 1.7 Uses a procedure to draw the pattern of Program 1.5. 


commands. The program is best examined together with the tree 
diagram shown in Figure 1.14. The procedure call PROCdrawhouse 
initiates the process. This contains a call to PROCdrawafront and 
PROCdrawacentre. PROCdrawafront contains two calls to 
PROCdrawawing. Eventually a path will terminate by the call of a 
procedure that contains MOVEs and PLOTs. 

Setting up a hierarchical programming structure to reflect the 
hierarchy in the image has two advantages. Firstly, it enables a 
methodical and structured approach to the task of generating this 
particular image. This includes the use of such procedures as 
PROCdrawabox by many higher level procedures. Secondly, and 
more importantly, it facilitates structural alterations. We could use a 
version of the same program to create a different house using the 
same building blocks. Similar houses could be drawn by simply 
changing some of the procedure parameters. This would alter the 
detailed design and style. More significant changes could be made 
by altering the structure of the program and thus the house. 
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MODE 0 
PROCinitialise 
PROCdrawhouse 
END 


DEF PROCdrawhouse 
PROCdrawafront 
PROCdrawacentre 

ENDPROC 


DEF PROCdrawafront 
PROCdrawawing(startx, starty, winglength, height) 
PROCdrawawing(startxtcentrelengthtwinglength, 
starty, winglength,height) 
ENDPROC 


DEF PROCdrawacentre 
PROCdrawabox(startxtwinglength, starty, 
centrelength, height) 
PROCdrawcentreroof 
PROCdrawcentrewindows 
PROCdrawadoor 
ENDPROC 


DEF PROCdrawawing(startx, starty, winglength, heigth) 
PROCdrawabox(startx, starty, winglength, height) 
PROCdrawwingwindows(startx, starty) 
PROCdrawawingroof(startx, startytheight) 
PROCdrawacircle(startxtwinglength/2, 

startyt+theight+height/8,30) 

ENDPROC 


DEF PROCdrawcentrewindows 
LOCAL x, y, width, wheight 
x = startx twinglength + centrelength/10 
y = starty +height/7 
width = centrelength/7: wheight = height/3 
PROCdrawawindow(x, y, width, wheight) 
PROCdrawawindow(x,y+wheighttheight/8, width, wheight) 
x = winglength+ startx + centrelength/2 -width/2 
PROCdrawawindow(x,yt+twheighttheight/8, width, wheight) 
x = startx + winglength+ centrelength-centrelength/10 - width 
PROCdrawawindow(x,y+wheighttheight/8, width, wheight) 
PROCdrawawindow(x, y, width, wheight) 

ENDPROC 


DEF PROCdrawwingwindows(startx, starty) 
LOCAL x, y, width, wheight 
x = startxtwinglength/5 
y = startytheight/7 
width = winglength/5 
wheight = height/3 
PROCdrawawindow(x, y, width, wheight) 


Program 1.8 Draws a Georgian house. 
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PROCdrawawindow(x+2*width, y, width, wheight) 
PROCdrawawindow(x+2*width,ytwheight+height/8, width, wheight) 


PROCdrawawindow(x,ytwheighttheight/8, width, wheight) 
ENDPROC 


DEF PROCdrawabox(startx, starty, length, height) 
MOVE startx, starty 
PLOT 1, length, O: PLOT 1, 0, height 
PLOT 1, -length, O: PLOT 1, 0, -height 

ENDPROC 


DEF PROCinitialise 
startx = 50: starty = 200 
winglength = 300: height = 480 
centrelength = 480 

ENDPROC 


DEF PROCdrawawingroof(startx, starty) 
MOVE startx, starty 
PLOT1,winglength/2, height/3 
PLOT1,winglength/2,- height/3 

ENDPROC 


DEF PROCdrawadoor 
LOCAL x, y, dheight, dwidth 
dwidth = centrelength/3.5: dheight = height/2.1 
x=startxtwinglengthtcentrelength/2-dwidth/2: y = starty 
PROCdrawabox(x, y, dwidth, dheight) 
PROCdrawabox(x+dwidth/5, ytdheight/6, dwidth/5, 0.7*dheight) 


PROCdrawabox(x+3*dwidth/5, yt+tdheight/6, dwidth/5, 0.7*dheight) 
MOVE x, ytdheight: PLOT 1, dwidth/2,dheight/7 
PLOT 1, dwidth/2,-dheight/7 

ENDPROC 


DEF PROCdrawawindow(startx, starty, width, wheight) 
LOCAL x, y 
PROCdrawabox(startx, starty, width, wheight) 
xpane = width/4: ypane = wheight/5 
y = starty 
FOR pane = 1 TO 5 
y = y + ypane: MOVE startx,y: PLOT 1, width, 0 
NEXT pane 
MOVE startx, starty 
x = startx 
FOR pane = 1 TO 3 
xX = x + xpane: MOVE x, starty: PLOT 1, 0, wheight 
NEXT pane 
ENDPROC 


DEF PROCdrawcentreroof 
LOCAL length, y, x, dx, dy 
y = starty+ height + height/3 : dy = height/30 
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910 x = startx + winglength/2: dx = winglength/20 
920 length = centrelengthtwinglength 


930 FOR i = 1 TO 10 


940 MOVE x, y 


950 PLOT 1, length, 0 


960 x =x + dx 
970 =NEXT 7 
980 ENDPROC 


Length = length - 2*dx: y = y - dy 


990 DEF PROCdrawacircle(xc, yc, r) 


1000 LOCAL x, y 
1010 MOVE xc +r, 
1020 FOR theta = 


TO 360 STEP 5 


1030 x = reCOSCRAD(theta)): y = r*SINCRAD(theta)) 
1040 DRAW xc + x, ye t+ y 


1050 NEXT theta 
1060 ENDPROC 


Program 1.8 continued 


Figure 1.13 
Output from Program 1.8 


Procedures with parameters 

In Program 1.7 the circle was drawn by using a procedure 
PROCdrawacircle that referred to variables ‘xc’, ‘yc’ and ‘r’ that 
controlled the position and the radius of the circle. These variables 
are known as global variables — they can be accessed from anywhere 
in the program. In this case they could be used in the main program 
or in the procedure PROCdrawacircle. 

A much neater way of controlling the position and the radius of 
the circle drawn by PROCdrawacircle is to supply the radius and the 
coordinates of the centre as three parameters. This is done in Pro- 
gram 1.9. We now have a completely general circle drawing pro- 
cedure. It is self contained and the information it requires is 
supplied to it in the form of parameters from the program module 


Computer calligraphy and program structure 19 


10 MODE 0 

20 INPUT sx, sy, r 

30 PROCdrawcircle(sx, sy, r) 

40 FOR circle = 0 TO 320 STEP 60 

50 xc = sx + reCOSCRAD(circle)): yc = sy + r*xSINCRAD(circle)) 
60 PROCdrawcircle(xc, yc, r) 

70 NEXT circle 

80 END 


100 DEF te eee yc, 1) 

110 MOVE xc +r, y 

120 FOR theta = 10. TO 360 STEP 10 

130 xX = reCOSC(RAD(theta)): y = r*xSINCRAD(theta)) 
140 DRAW xc + x, yc t y 

150 NEXT theta 

160 ENDPROC 


Program 1.9 Uses a procedure with parameters to draw the pattern of Program 1.5. 


that refers to the procedure. 
In the next example (Program 1.10) we have encapsulated the 
REPEAT-UNTIL structure of Program 1.6 in a procedure. This 
draws a line image from a file relative toa start point and introduces _ Figure 1.14 
the idea of drawing a picture or sub-picture at many different points The hierarchy of procedure 
on the screen. calls in the house drawing 
The procedure draws a line image from a start point that is program (Program 1.8) 


centre 
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supplied as a pair of parameters to the procedure. The start coordi- 
nates are calculated so that they lie on the circumference of a circle, 
lie on the locus of a spiral, lie on a sine wave or form a checkerboard 
pattern. Note that the spiral pattern also needs a change of scale 
between each drawing sequence (Figure 1.15). Program 1.10 as 
listed draws three images on a diagonal line. 


Menu selection 

A common use of IF THEN statements in graphics programming is 
in menu selection. This idea will be further developed in Chapter 2 
when we come to look at interactive graphics. The idea is demon- 
strated in Program 1.11 which should be self explanatory. 


1.4 UTILITIES ASSOCIATED WITH LINE IMAGE DRAWING 


Apart from the MOVE and DRAW utilities and their elaborations, 
most simple graphics packages provide a number of associated 
utilities concerning such requirements as legendry, windows etc. 
Although move and draw facilities are more or less universal the 
provision of supporting facilities is more varied and it cannot be said 
that the BBC/Electron facilities are typical. On other machines the 
same or better facilities may be available. The general rule is: the 


10 CLS 
20 INPUT "File name",file$ 
30 MODE 0 
40 xs = 0: ys = 0 
50 FOR motif = 1 TO 3 
70 =PROCdrawmotifat(xs, ys) 
80 xs = xs + 100: ys = ys + 100 
90 NEXT motif 
100 END 


110 DEF PROCdrawmotifat(xs, ys) 
120 = file=OPENIN(fileSs) 


130 REPEAT 
140 INPUT£ file,plotop,x,y 
150 PLOT plotop,x+xs,yt+tys 


160 UNTIL EOF£ file 
170 CLOSE£ file 
180 ENDPROC 


Program 1.10 Draws three copies of an image from a file. The images are placed on a diagonal line. 


10 MODE 0 

20 INPUT selection$ 

30 IF selection$ = "c" THEN PROCdrawacircle 

40 IF selection$ = "t" THEN PROCdrawatriangle 
50 IF selection$ = "r" THEN PROCdrawarectangle 
60 END 


Program 1.11 The use of IF statements to implement ‘menu selection’. 
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cheaper the machine the less likely it is to have such utilities as 
windows, origin translation etc. 


Origin translation and graphics legendry 

Drawing graphs is one of the most obvious and common applica- 
tions of line-drawing statements in computer graphics. We may 
have a set of 365 daily temperature readings or 12 monthly sales 
figures and wish to display this data graphically in the familiar way 
with the variations in the data plotted in the y direction as shown in 
Figure 1.16. Program 1.12 produces a first approximation to this. 
The origin is at the default position of (0,0) and lines 20 to 50 draw 
the vertical and horizontal axes. Note that after drawing the vertical 
axis we return to the origin (MOVE 0,0) to draw the horizontal axis. 
Each monthly sales figure is read from a DATA statement or 
perhaps in practice from a file. Lines are drawn from one monthly 
sales figure to the other giving a standard piecewise linear graph. 
Another point to note is the scaling. The vertical extent of the graph 


Figure 1.15 

Output from Program 1.10: a 
sea horse drawing procedure 
is supplied with positional 
information 
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Figure 1.16 
A ‘standard’ graph with 
original shift and legendry 


must be decided on and the data scaled accordingly. The horizontal 
extent depends on the desired size and number of data points. In 
the above program we have used two extra variables to emphasise 
this point. 

The next improvement to be made to the graph is to shift the 
origin diagonally in towards the centre to make way for legendry 
along each axis. We can do this by leaving the program exactly as it is 
and establishing a new graphics origin (0,0) anywhere on the screen 
by using VDU 29. Suppose we want the new origin to be (256,256). 
The statement is 


15 VDU 29, 256; 256; 


and this single statement added to the above program will plot the 
same graph in a position nearer the centre of the screen. Inciden- 
tally, note the use of semicolons in the VDU statement. A semicolon 
succeeding a parameter means that the parameter is to be in- 
terpreted as a double byte. Two bytes are needed to specify any 
coordinate in the notional 1280 1024 system. 

Having created the necessary space for the legendry by translat- 
ing the origin we can now proceed to add the legendry by adding 
the procedure captioned Program 1.13. The VDU 5 statement makes 
any subsequent text printed appear at the graphics CP. The text 
PRINTs can thus be controlled in the standard way by a FOR 
statement. Each PRINT is preceded by a MOVE to establish the text 
position. Note the use of the semicolon in the PRINT statements; 
this is to override the normal right-justified formatting and ensure 
that the integers are printed left-justified from the CP. Finally note 
the negative y displacements in the MOVE command. Remember 
that the (0,0) origin is now no longer physically at (0,0) on the screen 
and the negative displacements prevent the text from coinciding 
with the axes. 


i223 435 67 8 9 101112 
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10 MODE 4 : xscale = 80 : yscale = 1/10 
20 MOVE 0,0 

30 DRAW 0, 7000*yscale 

40 MOVE 0, 0 

50 DRAW 12*xscale, 0 

60 MOVE 0, 0 

70 FOR month = 1 TO 12 

80 READ monthlysales 

90 DRAW month * xscale, monthlysales * yscale 
100 NEXT month 

110 K=GET : MODE 7 : END 


1000 DATA 1023, 2056, 4132, 6415, 7185, 7244, 
6923, 7246, 6012, 4433, 5412, 3224 


Program 1.12 Plots a simple sales graph without legendry. 


15 VDU 29, 256;256; 


105 PROCLegendry 
110 K=GET : MODE 7 : END 


120 DEF PROCLegendry 

130 Vou 5 

140 FOR month = 1 TO 12 

150 MOVE month*xscale-24, -10 
160 PRINT ;month 

170 NEXT month 

180 FOR sales = 1000 TO 7000 STEP 1000 
190 MOVE -150, sales*yscale 
200 PRINT ;sales 

210 NEXT sales 

220 ENDPROC 


Program 1.13 Adding legendry to the sales graph. 


Plotting functions of a single variable - EVAL 
Although the utility (EVAL) introduced in this section is not strictly 
a graphics facility, it can be used in mathematical graphics. A 
common application of mathematical computer graphics is plotting 
a function of a single variable defined by an equation. This pro- 
cedure is identical both conceptually and practically to drawing 
simple graphs of sales data or temperature readings. The only 
difference this time is that the y data are values given by a 
mathematical equation. Let us look first of all at the problem of 
plotting a particular function. 

Program 1.14 plots a sine wave function. If we incorporate this in 
a procedure with frequency as a parameter, we can draw sine waves 
of different frequency. The output from this progam, Program 1.15, 
is shown in Figure 1.17. 
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Having looked at the general problem of plotting functions we 
now look at the the problem of plotting a function that is input from 
the keyboard textually, for example, in the form 


3¥x*X + 2kX + 6 


To do this we use an elegant facility - EVAL. This is best explained 
with reference to an example. If Program 1.16 is executed and 
SIN(RAD(x)) is typed in response to line 10, the effect is just the 


10 MODE 0 

20 VDU 29, 0;512; 

30 MOVE 0,0 : DRAW 1280,0 

40 MOVE 0,-300 : DRAW 0, 300 
110 MOVE 0,0 

120 yscale = 200 

130 FOR x = O TO 1279 STEP 10 
140 y = SINCRAD(x)) 

150 DRAW x, y*yscale 

160 NEXT x 


Program 1.14 Plots a simple sine wave function. 


10 MODE 0 

20 VDU 29, 0;512; 

30 MOVE 0,0 : DRAW 1280,0 

40 MOVE 0,-300 : DRAW 0, 300 

50 FOR i = 1 TO 3 

60 INPUT freqratio 

70 ~=PROCdrawsinewave(freqratio) 
80 NEXT i 

90 END 


100 DEF PROCdrawsinewave(freqratio) 
110 MOVE 0,0 

120 yscale = 200 

130 FOR x = O TO 1279 STEP 10 


140 y = SINCRAD(freqratio*x)) 
150 DRAW x, y*yscale 
160 NEXT x 


170 ENDPROC 


Program 1.15 Plots three different sine waves. 


10 INPUT functions 

20 FOR x = O TO 360 STEP 10 
30—soy:«= EVAL(function$) 

40 PRINT y 

50 NEXT x 


Program 1.16 Tabulates values for a function that is input as an expression at the keyboard. 
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same as omitting line 10 and making line 30 
30 y = SINCRAD(x)) 


The program will thus tabulate any harmonic function typed in 
response to line 10. For example: 


SINCRAD(x)) 
COSCRAD(x)) 
SINCRAD(x)) + 3*COSCRAD(x)) 


Another simple alteration would transfer the RAD conversion into 
the program. 


20 FOR i = O TO 360 STEP 10 
25. x = RADCi) 


This would then facilitate input of the form: 


SINCx) 
COS (x) 
SINCx) + 3*COS(x) 


The only problem with writing a program that will cope with any 
function of a single variable is that we must evaluate the function in 
advance of plotting it so that it can be scaled. To keep things simple 
we will consider only positive x values. We must input the x range as 
well as the function itself, evaluate the y range by finding the 
maximum and minimum value of y and use the difference between 
these two values to scale. The program that does this is Program 
1.17. 

Note that we evaluated the function in arbitrary x steps of 0.5. and 
have made the x scale factor 50. This will not do in general. Different 


Figure 1.17 

Output from Program 1.14: 
two sine waves, one at twice 
the frequency of the other 
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functions require different steps. However, the purpose of the 
program is to illustrate EVAL used in conjunction with basic plot- 
ting techniques and we leave the necessary extensions as an exer- 
cise. The output from the program is shown in Figure 1.18. 


Origin translation and multiple graphs 

Another common use of origin translation is the production of a 
number of graphs on the same screen using the same program 
module to generate each. Figure 1.19 shows four plots of the 
function: 


y = sin(x) exp(-ax) 


10 MODE 0 

20 DIM f(1000) 

30 INPUT xmin, xmax, function$ 
40 PROCevaluatefunction 

50 PROCfindyscale 

60 PROCpLotfunction 


70 END 

80 DEF PROCevaluatefunction 

90 i=0 

100 FOR x = xmin TO xmax STEP 0.5 
110 i1=i+1 

120 f(i) = EVAL(function$) 

130 NEXT x 


150 ENDPROC 


160 DEF PROCfindyscale 
170 = fmax = O: fmin = 10000 
180 FOR i = 1 TO imax 


190 IF f(i) > fmax THEN fmax = f(i) 

200 IF f¢€i) < fmin THEN fmin = f(i) 

210 NEXT i 

220 ~=IF fmax = fmin THEN yscale = 300/fmax 


ELSE yscale 300/ABS (fmax-fmin) 


230 ENDPROC 


240 DEF PROCpLotfunction 

250 vbU 29, 100; 500; 

260 MOVE 0,0 : DRAW 1000, 0 
270 MOVE 0, ~300 : DRAW 0, 300 
280 MOVE 0, 0 

290 FOR i = O TO imax-1 

300 DRAW i*50, f(it+1)*yscale 
310 NEXT i 

320 ENDPROC 


Program 1.17 Plots the graph of a function input as an expression. The y-scale is calculated from the 
range of function values, but the x-scale is arbitrarily fixed. 
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This is the equation for damped oscillations in a first order mechani- 
cal system such as a simple spring. The number of oscillations 
occurring depends on the damping constant a. The mathematics, 
however, is of little concern. The example is used to demonstrate 
the use of origin translation to produce multiple graphs. 

In Program 1.18 we have incorporated the structure that plots one 
damped sine wave in a procedure with three parameters. The first 
two parameters specify the origin, and the third parameter is the 
value of a. In fact in this example we have informally introduced the 
idea of windows and viewports that we will now describe. 


1.5 GRAPHICS AND TEXT WINDOWS 


As the name implies a window is a definable rectangular area on the 
screen within which the effect of any (visible) graphics statement or 
PRINT statement is seen. 


Figure 1.18 
Using EVAL to input a 
function as an equation 


Figure 1.19 
Origin translation and 
multiple graphs 
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Graphics statements that have effect outside the graphics win- 
dow are invisible. The window, if unspecified, is the screen area 
(1280x1024). The point of having a window equal to the screen area 
may not be at all obvious to you if you are new to computer graphics; 
but it is a vital facility. It means that you can specify coordinates 
outside the screen area with impunity, and have that part of the 
resulting image that lies on the screen preserved without distortion. 
If there were no windowing facility the shape of the visible portion 
of the figure would be unpredictable and would depend on the 
magnitude of the off-screen coordinates. 

A window facility is used in selecting sub-areas of a graphics 
display for ‘magnification’, for example, and it can be used in 
generating mathematical figures that would be difficult to generate 
otherwise. 

We can specify the size and the position of a window by using the 
VDU 24 statement. For example: 

VDU 24, x1; y1; x2; y2; 
specifies a window between x = xl and x = x2; and y = yl and 
y = y2. We give the (x,y) coordinates of the bottom left-hand corner 
of the window followed by the (x,y) coordinates of the top right- 
hand corner of the window. The images in Figure 1.20 show the 
effect of applying different windows to Program 1.6. That is, Pro- 
gram 1.6 was executed four times by placing it inside the following 
FOR loop: 

10 MODE 0 
20 yscale = 240 : xscale = 0.5 
30 PROCdrawgraph(0,650,2) 
40 PROCdrawgraph(0,240,1) 
50 PROCdrawgraph(600,240,0.5) 
60 PROCdrawgraph(600,650,0.25) 
70 END . 
80 DEF PROCdrawgraph(ox,oy,a) 
90 = VDU 29,o0x;o0y; 
100 MOVE 0,-150: DRAW 0,200 
110 MOVE 0,0 : DRAW 500,0 
120 MOVE 0,0 
130 FOR i = 1 TO 1000 STEP 10 
140 y = SINCRADCi))*EXP(-a*i/200) 
150 DRAW ixxscale, y*yscale 
160 NEXT i 
170 ENDPROC 


Program 1.18 Plots four sine waves at different origins. 
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FOR image = 1 TO 4 
READ x1, y1, x2, y2 
VDU 24, x1; y1; x2; y2; 


NEXT image 


The borders in the illustration are drawn to emphasize the window- 


ing effect - they do not get drawn as a consequence of applying a 
window. 


Viewports 
A facility associated with a window is a viewport. In general a 


. Figure 1.20 
window is used to define which part of the image we want to see. 


Four different windows 


Once we have defined such a sub-image we may want to place it —_ applied to the desert scene 
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Figure 1.21 
Different windows, same 
viewpoint 


anywhere on the screen. We define a viewport to do this. Thus the 
window determines the contents of the image and the viewport 
determines where the image appears on the screen. The viewport 
need not necessarily be the same size as the window: we will look at 
an application of a different viewport size in the next section. Here 
we will assume that it is. We can then implement a viewport 
transformation by using origin translation and this is precisely what 
we did in the multiple graph example (Figure 1.19) which uses four 
viewports. Alternatively we can use an origin change to move the 
image. Figures 1.21 and 1.22 illustrate the concept of a viewport. 
Figure 1.21 shows two different windows using the same viewport 
and Figure 1.22 shows the same window using two different 
viewports. We define a particular viewport (confusingly by using 
the window VDU command) and then use a coordinate transforma- 
tion to move the part of the image that we require into the viewport. 
The conceptual process is to define a window and then move the 
contents of the window into the viewport. What we are doing 
practically, however, is to define a window that in fact represents a 
viewport and then move the image until the required part is shown 
in the viewport. This difference between the conceptual process and 
the actual process is illustrated in Figure 1.23. 

If you find this is too confusing ignore it. Viewport transforma- 
tions are only of importance in professional computer graphics 
where fragments from many different source images are combined 
together on the screen. With a standard micro we have not really got 
the resources to operate such elaborate schemes. 


Zooming and panning 

As we have seen, if a window smaller than the image or the scene is 
specified the image is clipped. If we then specify a viewport that is 
equal to the screen area and display the contents of the window, we 
need to magnify the clipped image. Repeating this process is 
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Figure 1.22 
Same window, different 
viewpoints 


equivalent to the cinematic effect of ‘zooming in’. Alternatively we 


can ‘zoom out’ by applying the reverse process. 


We can apply a zoom transformation easily by using the default 
window, i.e. the whole screen, and redisplaying the image using a 


scaling factor: 


FOR image = 1 TO 4 


PLOT control, scale*x, scale*y 


scale = scale + 1 
NEXT image 


Conceptual process 


viewport 


Practical process 


| 


ig MAE ee Ma, 


origin window 


Figure 1.23 
The viewpoint process 
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However, this will always zoom in towards the bottom left hand 
corner of the screen. To zoom towards a particular point we have to 
use origin translation and translate the image so that the point of 
interest lies in this corner. The origin now needs changing each time 
through the loop as follows: 


FOR image = 1 TO 4 
VDU 29, scale*xz; scalexyz; 


PLOT control, scale*x, scalexy 


Figure 1.24 . 
Four ‘frames’ in zoom scale = scale + 1 
sequence NEXT image 
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Figure 1.24 shows the image subject first of all to unity scaling and 
an origin shift. The next three illustrations show the image scaled up 
and shifted by an increasing origin translation. This allows us to 
zoom into any point we choose. 

The cinematic effect of ‘panning’ is achieved by defining a series 
of smaller than full size windows in some given direction. For 
horizontal panning we would define another window to the left of 
the first etc. Re-displaying the window as a full size viewport will 
then give the panning effect. We can achieve this effect by multiply- 
ing by a scaling factor, say 1.5, and using origin translation. 


scale = 1.5 
FOR image = 1 TO 4 
VDU 29, shift;0; 


PLOT control, scale*x, scalexy 


shift = shift - 200 
NEXT image 


Figure 1.25 shows the effect of panning achieved by using the above 
program outline. Scaling and translating are two of a family of linear 
two-dimensional transformations. These are dealt with more for- 
mally in Chapter 3. Because of the large amount of processing time 
required, we can only simulate zooming and panning. However in 
some (expensive) graphics computers panning and zooming 
utilities are implemented by hardware. 


Text window 
The above discussion has been concerned with the graphics win- 
dow facility. A related facility is the text window. This is set up by: 


VDU 28, x1, y1, x2, y2 


but this time the origin is in the top left corner. When both a graphics 
and a text window are used at the same time, plotting is carried out 
in the graphics window and printing in the text window. The 
command CLG will clear the area within the graphics window only, 
and CLS the area within the text window only. Thus, separate 
colour control is easily achieved over the two areas. For example, 
consider: 


10 MODE 1 
20 VDU 24, ...required graphics window... 
30 VDU 28, ...required text window... 
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Figure 1.25 
Four frames in a panning 
sequence 


40 COLOUR 129 : GCOL 0, 130 
50 CLS : CLG 


This clears the text and graphics window to red and yellow 
respectively. 


60 COLOUR 2 : GCOL 0, O 


will then enable yellow letters on the red text background and black 
graphics lines on a yellow background. Both windows are ona black 
background. 

Program 1.19 incorporates this facility (in MODE 0) for the multi- 
graph damped sine wave introduced above. The output from the 
program is shown in Figure 1.26. 


170 
180 
190 
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Figure 1.26 
Using a text window 


MODE O 

yscale = 240 : xscale = 0 
PROCdrawgraph(0,650,2,5,5 
PROCdrawgraph(0,240,1,5,1 
PROCdrawgraph(600,240,0.5,45,18) 
PROCdrawgraph(600,650,0.25,45,5) 
K=GET : MODE 7 : END 


DEF PROCdrawgraph(ox,oy,a,t1,t2) 


5 


) 
8) 


VDU 29,0x;oy; 
VDU 28,t1,t2,t1+10,t2 
COLOUR 129 : CLS : COLOUR 0 
PRINT TAB(O,0); " a = "3a; 
MOVE 0,-150: DRAW 0,200 
MOVE 0,0 : DRAW 500,0 
MOVE 0,0 
FOR i = 1 TO 1000 STEP 10 
y = SINCRAD(Ci))*EXP(-a*i/200) 
DRAW i*xscale, y*yscale 
NEXT 1 


200 ENDPROC 


Program 1.19 Plots the four sine waves with legendry in different text windows. 
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2 Raster-ops, palettes and 
interactive drawing and 
painting 


In this chapter we examine the facilities that are needed ina graphics 
system to enable the computer to be used as a drawing aid for an 
artist or as a tool in Computer Aided Design (CAD). The provision 
of such facilities on the BBC Micro or the Electron relies heavily on 
the availability of graphics features such as logical plotting opera- 
tions (‘raster-ops’) and the ‘video look-up table’. In the first two 
sections of this chapter, we present a summary of these two 
facilities. We then look at how they can be used to enhance ‘normal’ 
line drawing and provide facilities such as multi-plane images and 
instantaneous switching between images. Later in the chapter, we 
look at algorithms for ‘painting’ regions on the screen and mixing 
colours. We finish the chapter by looking at some of the commonly 
available graphics peripherals that can be used to make life easier for 
the user of an interactive graphics system. 


2.1 THE GCOL STATEMENT 


In BBC or Electron BASIC, the GCOL statement is used not only to 
select the colour to be used in subsequent plotting operations, but 
also to select one of several different logical operations to be used in 
combining that colour with existing colour on the screen. The 
modern technical term for such logical operations is ‘raster-ops’. 

Table 2.1 contains a summary of the five different plotting opera- 
tions that can be specified using the first parameter of the GCOL 
statement. Figure 2.1 illustrates the way in which these work. Table 
2.2 summarises the contexts in which the different logical opera- 
tions are frequently used. These will all be extensively illustrated 
throughout this chapter. 

Running Program 2.1 should give you a good grasp of the way in 
which information on the screen changes when plotting is done 
under the control of the various logical operations. The program 
runs in MODE 1 where the colour of each pixel is represented by a 
two-bit colour code. Initially, the screen is divided into four 
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Table 2.1 The various GCOL operations 


GCOL 0, colour 


GCOL 1, colour 


GCOL 2, colour 
GCOL 3, colour 
GCOL 4, colour 


any subsequent plotting will be in the specified 
colour 


the colour that results from subsequent plotting is 
produced by performing an OR operation between 
the specified colour and the existing screen colour at 
a pixel 


as 1 but the logical operation is AND 
as 1 but the logical operation is EOR (exclusive OR) 


as 1 but the logical operation is NOT (i.e. the colour 
at any pixel visited is inverted) 


quadrants and each quadrant is filled with one of the four colours 
available. The code for each colour is displayed as a bit-pattern in the 
centre of each quadrant. The user then selects two GCOL parame- 
ters and the program colour fills a rectangle in the centre of the 
screen under the control of the GCOL parameters selected. This 


Old value 


Old value 


New value 


GCOLO, 


Screen 
memory 


New value 


GCOL 1, 
GCOL 2, 
GCOL 3, 


Screen 
memory 


EOR (oid value) 
AND (old value) 
OR (old value) 


GCOL 4, 


Screen 
memory 


NOT (old value) 


Figure 2.1 

Different raster-ops cause 
values to be inserted in the 
screen memory in different 
ways 
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Table 2.2 Applications of the various GCOL operations 


GCOL 1 (OR) is used in modes with more than one bit per pixel if 
the screen memory is to be treated as if it contains 
more than one image plane. Use of GCOL 1 enables 
the plotting of information in a specified plane. 


GCOL 2 (AND) is used in multiple image-plane applications to delete 
information from a selected plane. 


GCOL 3 (EOR) has the interesting property that two successive plots 
of the same object will restore information on the 
screen to its previous state. This is important in 
interactive graphics applications where lines or 
objects in different colours are moved about the 
screen without deleting existing information on the 
screen. 


GCOL 4 (NOT) is useful for ensuring that information is plotted in a 
colour that contrasts with whatever is already on the 
screen. GCOL 4 also has the property that two 
successive plots of the same object will restore the 
screen to its original state, but the colour of the 
plotted information can not be controlled. 


demonstrates the effect of the given GCOL parameters when plot- 
ting takes place over each possible existing colour on the screen. The 
colour that appears in a region depends on up to three things: 


1. The raster-op or logical operation selected. 

2. The colour selected (but not in the case of GCOL 4). 

3. The existing colour on the screen (but not in the case of GCOL 
0). 


Colour Plate 1 demonstrates some of the possibilities. 

Note the way in which GCOL 4 has been used in the program to 
ensure that lines round the regions of interest are drawn in a colour 
that contrasts with the colour of the region. The bit-patterns have 
also been printed under the control of GCOL 4 to ensure that they 
show up against the surrounding colour, whatever it is. Note that 
GCOL does not normally affect the colour of characters printed. The 
COLOUR statement is usually used for this purpose. However, the 
VDU 5 statement switches on the facility whereby characters are 
printed at the graphics current position. Character printing then 
takes place under control of any logical operation selected by GCOL 
and in the colour selected by GCOL. 


2.2 PALETTE CHANGING 


A colour for character printing or plotting is referred to by means of 
a ‘logical colour code’ that specifies the bit-pattern to be inserted in 
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the screen memory for each pixel that is coloured. The logical colour 
code is used as the parameter of a COLOUR statement or as the 
second parameter of a GCOL statement. 

An important facility in modern computer graphics is the ability 
to change the actual screen colours associated with the logical colour 
codes stored in the screen memory. On the BBC Micro and Electron, 
there are sixteen ‘actual colours’ that can appear on the screen. 
These colours are numbered from 0 to 15 as listed in Table 2.3. Note 
that, of the sixteen actual ‘colours’, only eight are steady colours: the 
rest are flashing colours that alternate between two of the eight basic 
colours at a rate that can be controlled by the programmer (using the 
*FX 9 and *FX 10 commands). In professional computer graphics 
systems, 256 colours is normal. 

In MODE 2, the sixteen logical colour codes initially correspond 
directly to the sixteen actual colour codes. In a four-colour mode 
such as MODE 1, the initial arrangement is as given in Table 2.4. 


10 MODE 1 : VDU 5 

20 PROCcaption(640,512,1279,1023) 

30 PROCsquare(0,1,0,512,640,1023) 

40 PROCcaption(0,512,640,1023) 

50 PROCsquare(0,2,640,0,1279,512) 

60 PROCcaption(640,0,1279,512) 

70 PROCsquare(0,3,0,0,640,512) 

80 PROCcaption(0,0,640,512) 

90 GCOL 4,0 : MOVE 525,750 : INPUT "GCOL ",op,col 
100 PROCsquare(op,col ,340,312,940,712) 
110 PROCcaption(340,312,640,512) 

120 PROCcaption(640,312,940,512) 

130 PROCcaption(340,512,640,712) 

140 PROCcaption(640,512,940,712) 

150 k=GET:MODE 7:END 


160 DEF PROCsquare(logop,colour,x1,y1,x2,y2) 
170 GCOL logop,colour 

180 MOVE x1,y1 : MOVE x1,y2 

190 PLOT 85,x2,y1 : PLOT 85, x2,y2 

200 GCOL 4,0 

210 MOVE x1,y1 : DRAW x1,y2 : DRAW x2,y2 
220 =DRAW x2,y1 : DRAW x1,y1 

230 ENDPROC 


240 DEF PROCcaption(x1,y1,x2,y2) 

250 LOCAL cx,cy 

260) cx=(x14+x2)/2 : cy=Cy1+y2)/2 

270 ~=©GCOL 4,0:MOVE cx,cy 

280 PRINT ;POINT(cx,cy) DIV 2; POINT(cx,cy) MOD 2 
290 ENDPROC 


Program 2.1 Demonstration of effect of GCOL parameters. 
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Table 2.3 The sixteen actual colours 


colour number colour name 
0 black 
1 red 
2 green 
3 yellow 
4 blue 
5 magenta 
6 cyan 
7 white 
8 flashing black-white 
9 flashing red-cyan 
10 flashing green-magenta 
11 flashing yellow-blue 
12 flashing blue-yellow 
13 flashing magenta-green 
14 flashing cyan-red 
15 flashing white-black 


Colour code 0 represents black (actual colour 0) and colour code 1 
represents red (actual colour 1). However, colour code 2 represents 
yellow (actual colour 3) and colour code 3 represents white (actual 
colour 7). In order to handle this correspondence, the graphics 
processor chip stores a ‘video look-up table’ containing the actual 
colour number that corresponds to each logical colour code that is 
available in the current mode. When the screen memory is being 
scanned by the graphics processor, the colour code at a pixel is used 
to find the corresponding actual colour from this look-up table and it 
is this actual colour that defines the combination of ‘Red-Green- 
Blue’ signals to be sent to the television hardware (see Figure 2.2). 

By changing the entries in the video look-up table, we can make a 
given colour code correspond to any one of the actual colours 
available. 

In BBC or Electron BASIC, the VDU 19 command is used to 
change the actual colour associated with a given colour code. This is 
easily implemented ‘behind the scenes’ by changing an entry in the 


Table 2.4 Default actual colour settings for the four colour codes available 
in MODES 1 and 5 


colour code numbers default actual colours 
foreground background colour number 
0 128 black 0 
1 129 red 1 
2 130 yellow 3 
3 131 white 7 
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stored for ———™ is displayed on used to convert a colour code 
a pixel 2 screen stored in the screen memory 
into an actual colour to be 
2 


displayed on the screen 


video look-up table. 

This process is demonstrated by Program 2.2 which first colours a 
square in the centre of the screen in red (logical colour code 1). Each 
time a key is pressed, the program uses a VDU 19 command to 
change the actual colour associated with colour code 1. Note that a 
VDU 19 colour change is almost instantaneous. It takes effect in the 
time taken for one scan of the screen memory (one fiftieth of a 
second). All that is needed behind the scenes to implement a change 
is to change the contents of a single entry in the look-up table. 


10 MODE 1 

20 PROCsquare(0,1,340,312,940,712) 

30 actual=1 

40 PROCcaption 

50 REPEAT 

60 INPUT TAB(O,2)"New actual colour",actual,TAB(0O,2) ,SPC(30) 
70 =vDU 19,1,actual, 0,0,0 

80 PROCcaption 

90 PRINT TAB(3,30)"Q to Quit, any other key to continue" 
100 key$=GET$ : PRINTTAB(3,30) ;SPC(36) 

110 UNTIL key$="Q" 

120 MODE 7:END 


130 DEF PROCsquare(logop,colour,x1,y1,x2,y2) 

140 GCOL logop,colour 

150 MOVE x1,y1 : MOVE x1,y2 

160 PLOT 85,x2,y1 : PLOT 85, x2,y2 

170 GCOL 4,0 : MOVE x1,y1 

180 DRAW x1,y2 : DRAW x2,y2 : DRAW x2,y1 : DRAW x1,y1 
190 ENDPROC 


200 DEF PROCcaption 

210 LOCAL cx,cy 

220 PRINT TABC(13,14)"COLOUR CODE 1" 

230 PRINT TAB(12,17)"ACTUAL COLOUR ";actual;" " 
240 ENDPROC 


Program 2.2 Demonstration of palette changing. 


42 Art of microcomputer graphics 


Figure 2.3 

The state of the video look-up 
table after the three VDU 19 
statements are obeyed 


During the next scan of the screen memory, all pixels containing the 
logical colour code that was affected will appear on the screen in the 
new actual colour. 

Using a combination of VDU 19 statements enables us to select 
any combination of actual colours for use in a mode. For example, in 
a two-colour mode, a drawing that appears initially in white on a 
black background can be instantaneously changed to black on a 
white background with: 


vou 19, 0,7, 0,0,0 
vbU 19, 1,0, 0,0,0 


In a four-colour mode, we can select any combination of four col- 
ours, for example: 


VDU 19, 0,4, 0,0,0 
VDU 19, 1,2, 0,0,0 
VOU 19, 2,6, 0,0,0 


, at A 


sets logical colours 0, 1 and 2 to dark blue, green and cyan respec- 
tively, leaving logical colour 3 set to white. Figure 2.3 indicates the 
state of the video look-up table after these three statements have 
been obeyed. 


2.3 IMAGE SWITCHING — NON-OVERLAPPING IMAGES 


One of the commonest uses of the palette changing facility de- 
scribed in the last section is in the instantaneous switching between 
different images on the screen. 

A picture that has been plotted using a particular colour code can 
be ‘switched off’ by setting the actual colour associated with the 
colour code to be the same as the background colour. The picture 
can be instantaneously ‘switched on’ by setting the colour code back 
to an actual colour that contrasts with the background. 


Video look-up table 


Actual 
colour 


Colour 
code 


——~» Actual colours 
Colour codes ————» 
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If several images are drawn on the screen using different colour 
codes, then we can switch any picture on or off instantaneously by 
changing the actual colour associated with the appropriate code. We 
first deal with the simple case where the images to be selectively 
switched on and off do not overlap. In the next section, we deal with 
the problems that arise when the images do overlap. 

When the images do not overlap, we simply use a different colour 
code for each image. For example, Program 2.3 plots three different 
sales graphs in three quadrants of the screen. The program uses 
MODE 1 where four different colour codes are available. One of 
these codes has to be used for the background and this leaves us 
with three codes, one of which is used for each sales graph. 

The user at the keyboard can then switch any one of the graphs on 
or off. Typing a ‘1’ will switch one graph on or off. Keys ‘2’ and ‘3’ 
have a similar effect on the other two graphs. (Type ‘Q’ to Quit the 
program.) 

Switching between non-overlapping images that are plotted in 
different colours is often illustrated using the popular ‘bouncing 
ball’ demonstration. Program 2.4 runs in MODE 2. It plots 15 balls in 
different vertical positions on the screen, each ball being plotted 
using a different colour code. Each colour code is set to black whena 
ball has been drawn using that code. The program then cycles 
through the 15 different colour codes setting each one to white in 
turn and then back to black. The order in which this is done gives the 
effect of a bouncing ball. 

When you run this program, you should see from the initial time 
it takes to draw the 15 copies of the ball that any attempt to animate 
the ball by simply drawing and deleting would be hopelessly slow. 


2.4 IMAGE PLANE SWITCHING — OVERLAPPING IMAGES 


Now consider what happens if two overlapping images are to be 
selectively switched on and off. Figure 2.4 represents the situation 
where two images overlap. If imagel is switched on, we must also 
switch on the overlapping region. Similarly, if image2 is switched 
on, we must switch on the overlapping region. In order to do this, 
we need three different colour codes, one for pixels contained only 
in imagel1, one for pixels contained only in image2 and a third code 
for pixels in the overlapping region. 


Separate bit planes 
The most convenient way to organise the available colour codes is to 
use a separate ‘bit-plane’ for each image. 

In MODE 1, we have 2-bit colour codes, but instead of using the 
MODE 1 screen memory as a single plane of 2-bit colour codes we 
can envisage it as two separate planes of 1-bit codes. This was 
illustrated in Figure 1.5. We can now think in terms of plotting 
imagel in one plane and image2 in the other plane. The four 
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possible bit combinations at a pixel position are: 


00 = imagel and image2 background 
01 = imagel foreground 
10 = image2 foreground 
11 = imagel and image2 foreground 


WN © 


10 DIM actual (3) 

20 MODE 1 : VDU 5 

30 FOR col=1 TO 3 

40 actual(col)=0 : VDU 19,col,0, 0,0,0 
50 NEXT col 

60 xscale = 30 : yscale = 1/30 
70 PROCdrawgraph(50,600,1,1981) 
80 PROCdrawgraph(700,600,2,1982) 
90 PROCdrawgraph(50,100,3,1983) 
100 PROCswitching 

110 MODE 7:END 


120 DEF PROCdrawgraph(ox,oy,col,year) 
130 GCOL O,col 

140 VDU 29, ox; oy; 

150 MOVE 0,0 : DRAW 0,400 

160 MOVE 0,0 : DRAW 500,0 

170 READ monthlysales 

180 MOVE xscale, monthlysales*yscale 
190 FOR month = 2 TO 12 

200 READ monthLlysales 

210 DRAW month*xscale, monthlysales*yscale 
220 NEXT month 

230 MOVE 200,-10 : PRINT ;year 

240 ENDPROC 


250 DATA 1023, 2056, 4132, 6415, 7685, 7844, 
6923, 7246, 6012, 4433, 5412, 3224 
260 DATA 1145, 3347, 4245, 6654, 7755, 6877, 
5789, 7456, 5321, 4455, 3567, 3678 
270 DATA 996, 2676, 2567, 3215, 4985, 5864, 
5778, 5266, 4562, 4433, 3412, 2284 


280 DEF PROCswitching 
290 LOCAL command$,col 


300 REPEAT 
310 command$=GETS 
320 IF INSTR('123",command$) THEN 


cot=ASC(command$)-ASC("0") : 
actual(col)=7-actual(col) : 
VDU 19,col,actual(col), 0,0,0 
330 UNTIL INSTRC''Qq",command$) 
340 ENDPROC 


Program 2.3 Switching between three graphs. 
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Switching between two planes 
Starting with the easier consideration of switching between planes 
(assuming that both images are already built up) we would proceed 


as follows. 
10 MODE 2 : VDU 23,1,0;0;0;0; 
20 x=644 : y=992 : r=32 
30 FOR colourcode=1 TO 15 
40 VDU 19,colourcode,7,0,0,0 
50 PROCdrawball(colourcode,x,y,r) 
60 VDU 19,colourcode,0,0,0,0 
70 3=y=y-68 
80 NEXT colourcode 
90 prevcode=0 
100 REPEAT 
110 FOR code=1 TO 15 
120 VDU 19,prevcode,0,0,0,0 
130 VDU 19,code,7,0,0,0 
140 prevcode=code 
150 PROCdelLay(15-code/2) 
160 NEXT 
170 FOR code=14 TO 2 STEP -1 
180 VDU 19,prevcode,0,0,0,0 
190 VDU 19,code,7,0,0,0 
200 prevcode=code 
210 PROCdelay(15-code/2) 
220 NEXT 
230 UNTIL INKEYS(O)=" " 
240 MODE 7:END 
250 DEF PROCdrawball(c,xc,yc,r) 
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LOCAL xr,yr,nextxr,p,steps,theta 
steps=30 : theta=2*PI/steps 
cos=COS(theta) : sin=SIN(theta) 
GCOL O,c 
MOVE xctr,yc 
xr=r 3 yr=0 
FOR p=1 TO steps 

nextxr=xr*cos-yr*sin 
yr=xr*esintyr*cos 
xr=nextxr 
MOVE xc,yc 
PLOT 81,xr,yr 
NEXT p 
ENDPROC 


DEF PROCdelay(d) 
LOCAL t 

t=TIME+d 

REPEAT : UNTIL TIME>t 
ENDPROC 


Program 2.4 Bouncing ball: non-overlapping images. 
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Figure 2.4 

Two overlapping images to be 
selectively switched on and 
off and the colour codes (and 
bit patterns) to be used for 
different regions 


Background: code 0 (00) 


image 1 image 1 image 2 
only: and only: 
code 1(01) image2 code 2(10) 


overlap: 
code 3(11) 


To DISPLAY imagel: 


VDU 19, 0, backgroundcolimaget, 0,0,0 
VDU 19, 1, foregroundcolimage1, 0,0,0 
VDU 19, 2, backgroundcolimage1, 0,0,0 
VDU 19, 3, foregroundcolimage1, 0,0,0 
Image? is thus set to the background colour selected for image1 and 


becomes invisible. 
To DISPLAY image2: 


VDU 19, 0, backgroundcolimage2, 0,0,0 
VDU 19, 1, backgroundcolimage2, 0,0,0 
VDU 19, 2, foregroundcolimage2, 0,0,0 
VDU 19, 3, foregroundcolimage2, 0,0,0 


Now image! is set to the background colour selected for image2 and 
becomes invisible. 


Plotting in separate planes 
To plot in the imagel plane, without affecting existing image2 
points, we have to proceed as follows for each pixel: 

0=00 becomes 01 

1=01 remains 01 (imagel point already there) 

2=10 becomes 11 (image2 point already there) 

3=11 remains 11 (image2 and image! point already there) 
The third column is produced by ORing (inclusive) 01 with the 
second column and we simply precede any plotting statements with 
the appropriate GCOL statement: 


GCOL 1, 1 


Similarly to plot in the image2 plane without affecting imagel 
points: 
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00 becomes 10 
01 becomes 11 
10 remains 10 
11 remains 11 


WNrO 
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and the appropriate GCOL statement is: 
GCOL 1, 2 


Finally, information that is common to both images can be plotted in 
both planes simultaneously by using: 


GCOL 0,3 


Program 2.5 plots two sales graphs on the same axes and then 
allows the user to switch either graph on or off (using keys ‘1’ and 
‘2'). In the previous sales graph example, each graph had its own 
axes which were switched on and off with the graph. Here, the axes 
are common to both graphs and are plotted in colour 3. A common 
background colour is used for both graphs. This is necessary if both 
graphs are allowed to be switched on at once. If only one graph was 
to be switched on at a time, then we could have used a different 
background colour for each graph. 

The data have been chosen to include months for which the 
graphs overlap completely in order to illustrate clearly how the 
program treats such overlapping regions. When a graph is switched 
on, the actual colour associated with the overlapping region (colour 
code 3) is set to the actual colour for the graph being switched on. 
Thus the overlapping region is displayed in the colour for the last 
graph switched on. 

When a graph is switched off, the actual colour selected for the 
overlapping region depends on whether or not the other graph is 
switched on. If it is, then the overlapping region is set to the actual 
colour for the other graph, otherwise it is set to the background 
colour. The process is illustrated in Figure 2.5 

An interesting technique that we have used to keep track of the 
status of the screen is to use a variable ‘status’ which we imagine asa 
pattern of two bits indicating what combination of the two graphs is 
currently switched on: 


status = 0 (00) both graphs off. 
status = 1 (01) graph 1 on, graph 2 off. 
status = 2 (10) graph 2 on, graph 1 off. 
status = 3 (11) both graphs on. 


This variable is adjusted when a graph is switched on or off by using 
logical operations which affect the bit-pattern representation of the 
value of the variable in much the same way as the logical plotting 
operations affect the bit-pattern representation of the colour code at 
a pixel. 


Plane switching and animation 
Instantaneous switching between separate image planes is an im- 
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10 MODE 1 : VDU 5 

20 VDU 29, 150; 150; 

30 vbU 19,1,0,0,0,0, 19,2,0,0,0,0, 19,3,0,0,0,0 
40 status=0 

50 xscale = 80 : yscale = 1/10 

60 MOVE 0,0 : DRAW 0, 7000*yscale 

70 MOVE 0,0 : DRAW 12*xscale, 0 

80 FOR month = 1 TO 12 

90 MOVE month*xscale-24, -10 

100 PRINT ;month 

110 NEXT month 

120 FOR sales = 1000 TO 7000 STEP 1000 
130 MOVE -150, sales*yscale 

140 PRINT ;sales 

150 NEXT sales 

160 PROCpLlotsales(1,1981) 
170 PROCpLotsales(2,1982) 
180 PROCswitching 
190 MODE 7:END 


200 DEF PROCpLotsales(col,year) 

210 GCOL 1,col 

220 READ monthlysales 

230 MOVE xscale, monthlysales * yscale 

240 ~=FOR month = 2 TO 12 

250 READ monthlysales 

260 DRAW month*xscale, monthlysales*yscale 
270 + =NEXT month 

280 MOVE 150,700-50*col : PRINT ;year 

290 ENDPROC 


300 DATA 1023, 2056, 4132, 6415, 7685, 7844, 
6923, 7246, 6012, 4433, 5412, 3224 
310 DATA 1145, 3347, 4132, 6415, 7155, 6877, 
5789, 7456, 5821, 5355, 3567, 3678 


320 DEF PROCswitching 
330 LOCAL command$ 


340 REPEAT 
350 command$=GETS 
360 IF INSTR(''12",command$) THEN 


PROCswi tch(ASC (command$) -ASC("'0"') > 
370 ~=UNTIL _INSTRC"Qq", command) 
380 ENDPROC 


390 DEF PROCswitch(col) 

400 LOCAL actual,overlap 

410 status=status EOR col 

420 actual=status AND col 

430 VDU 19,col,actual, 0,0,0 

440 IF actual=0 THEN overlap=status ELSE over lap=col 
450 VDU 19,3,overlap, 0,0,0 

460 ENDPROC 


Program 2.5 Switching between two graphs on the same axis. 
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portant technique in animation. We have already mentioned that a 
sequence of normal plot and delete operations would be too slow for 
animation. We saw an example of the use of palette changing in the 
bouncing ball animation of Program 2.4. Program 2.6 uses the 
bouncing ball demonstration again, but with a larger ball and only 
four images of the ball that overlap. The way in which the images 
overlap and the colour codes used to represent the parts of each 
image is shown in Figure 2.6. 

Program 2.7 is another example of the use of palette changing in 
animation. This program animates a bee by giving the impression 
that its wings are moving (see Figure 2.7). One pair of wings is 
drawn in colour code 1 and the other pair is drawn in colour code 2. 
The program repeatedly switches between the two pairs of wings, 
first switching colour code 1 to white with code 2 set to black, and 
then switching code 2 to white with code 1 set to black. The body of 
the bee is displayed in colour code 3 which is permanently set to 
yellow. 

We have enhanced the effect produced by this program by 
repeatedly scrolling the screen ina random direction, up, down, left 
or right, and by adding a continuous buzzing sound whose volume 
also varies randomly. 


2.5 COMPOSITE IMAGE WITH PRIORITY 


With a choice of four colours, the above scheme can easily be 
adapted to set up a composite image (foreground, midground and 


Image 1 
0 1985 
Image 2 
i MONTH 


Display both 
superimposed 


Display Display 
image 2 image 1 


31985 = 1984 0 1985 
"1984 
Figure 2.5 
Selective display of two 
MONTH MONTH MONTH graphs stored in two separate 
image planes 
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MODE 2 : VDU 23,1,0;0;0;0; 
x=644 : y=800 : r=128 
colourcode=1 
FOR image=1 TO 4 
PROCdrawball(colourcode,x,y,r) 
y=y-160 
colourcode=coLlourcode*2 
NEXT image 
FOR code=1 TO 15 
VDU 19,code,0, 0,0,0 
NEXT code 
VDU 19,1,7,0,0,0, 19,3,7,0,0,0 
REPEAT 
FOR frame=1 TO 6 
PROCswitch(frame) 
PROCde Lay ( (ABS (3-frame)+1)*4) 
NEXT frame 
UNTIL INKEY$(O)=""_" 
MODE 7:END 


DEF PROCdrawball(c,xc,yc,r) 

LOCAL xr,yr,nextxr,p,steps,theta 
steps=30 : theta=2*PI/steps 
cos=COS(theta) : sin=SIN(theta) 
GCOL 1,c 
MOVE xctr,yc 
xr=r : yr=0 
FOR p=1 TO steps 


Program 2.6 Bouncing ball: overlapping images. 


Program 2.7 An animated buzzing bee. 


background). Using GCOL the foreground and midground planes 
can be independently accessed and anything drawn in the 
midground plane that is shadowed by anything drawn in the 
foreground plane is automatically obscured in the composite image. 
Also we can delete from the foreground, delete from the 
midground, add to the foreground or add to the midground and the 


MODE 1 

start=&3000 DIV 8 
bot=start:top=&1000 
minx=1279:maxx=0 : miny=1023:maxy=0 
VDU 19,3,3, 0,0,0 

GCOL 0,3 

PROCdraw 

PROCswitchon(1) 

GCOL 1,1 

PROCdraw 
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280 nextxr=xr*cos-yr*sin 
290 yr=xrxsintyr*cos 

300 xr=nextxr 

310 MOVE xc,yc 

320 PLOT 81,xr,yr 

330 NEXT p 


340 ENDPROC 


350 DEF PROCdeLay(d) 

360 LOCAL t 

370 t=TIME+d 

380 REPEAT : UNTIL TIME>t 
390 ENDPROC 


400 DEF PROCswitch(frame) 
410 REM wait until start of next TV scan of screen memory. 
420 —-*FX 19 
430 ON frame GOTO 440,450,460,470,480,490 
440 vbdU 19,1,0,0,0,0, 19,2,7,0,0,0, 19,6,7,0,0,0 : ENDPROC 
450 VbdU 19,3,0,0,0,0, 19,2,0,0,0,0, 

19,4,7,0,0,0, 19,12,7,0,0,0 : ENDPROC 
460 VDU 19,6 , 19,4,0,0,0,0, 19,8,7,0,0,0 : ENDPROC 
470 VDU 19,8 19,6,7,0,0,0 : ENDPROC 
480 VDU 19,1 
2 
6 


490 VDU 19, 
500 ENDPROC 


foreground/midground priority is automatically taken into account. 
Common operations that we might want to perform are illustrated 
in Figure 2.8. 

How this is accomplished is now explained. Suppose we are 
operating in a four colour mode (this allows two planes plus 
background). A four colour mode means that there are two bits per 


110 PROCswitchon(2) 

120 GCOL 1,2 

130 PROCdraw 

140 vx=minx : vy=miny 

150 maxvx=minx+1279-maxx : maxvy=miny+1023-maxy 
160 volume=15 

170 SOUND 1,0,200,0:SOUND 0,-volume,3,255 

180 REPEAT 

190 PROCswitchon(off%) 

200 PROCmove 


a a ee 


continued 
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330 


340 
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360 
370 
380 


390 
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410 
420 
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440 
450 
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480 


490 
500 
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520 
530 
540 
550 
560 
570 
580 
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UNTIL INKEY(5)>-1 
MODE 7 

*FX 15,0 

END 


DEF PROCdraw 
READ points 
FOR p=1 TO points 
READ updown<,x,y 
PLOT updown%,x,y 
IF x<minx THEN minx=x ELSE IF x>maxx THEN maxx=x 
IF y<miny THEN miny=y ELSE IF y>maxy THEN maxy=y 
NEXT p 
ENDPROC 


DEF PROCswitchon(screen%) 
on% = screen% : of f% = 3-on% 
VDU 19, on%, 7, 0,0,0 
VDU 19, of f%,0, 0,0,0 
ENDPROC 


DEF PROCmove 
dir=RND(4) 
volume=vo Lume+RND(3)-2 
IF volume<5 THEN volume=5 ELSE IF volume>15 THEN volume=15 
SOUND &10,-volume,3,255 
IF dir=1 THEN PROCmoveview(-1,0) 
IF dir=2 THEN PROCmoveview(1,0) 
IF dir=3 THEN PROCmoveview(0,-1) 
IF dir=4 THEN PROCmoveview(0,1) 
ENDPROC 


DEF PROCmoveview(xinc,yinc) 
LOCAL nx,ny 
nx=vx+16*xine : ny=vy+32*yinc 
IF nx<O OR nx>maxvx OR ny<O OR ny>maxvy THEN ENDPROC 
VX=Nx © vy=ny 
start=start-xinc+80*yinc 
IF start<bot THEN start=start+&A00 
IF start>top THEN start=start-&A00 
*FX 19 
VDU 23;12,start DIV 256,0;0;0; 
VOU 23;13,start MOD 256,0;0;0; 
ENDPROC 


DATA 86 

DATA 4,687,464, 5,718,499, 5,754,509, 5,775,503, 
5,793,482, 5,807,434, 5,799,388, 5,765,348, 
5,731,344, 5,696,360 

DATA 5,685,342, 5,652,317, 5,589,292, 5,546,283, 
5,473,283, 5,428,294, 5,382,325, 5,354,377 


Program 2.7 continued 


640 
650 
660 


670 


680 


690 
700 


710 
720 


730 
740 


750 


760 


770 


780 
790 


800 


810 


820 


830 


DATA 
DATA 
DATA 


DATA 


DATA 


DATA 
DATA 


DATA 
DATA 


DATA 
DATA 


DATA 


DATA 


DATA 


DATA 
DATA 


DATA 


DATA 


DATA 


DATA 


5,364,429, 
5,579,499, 


85,637,455, 
85,637,358, 


4,579,499, 


85,568,381, 
85,589,292, 


4,466,496, 


85,451,377, 
85,473,283, 


4,761,466, 
5,776,423, 
5,762,464 
4,779,448, 
5,778,428 
4,807 ,434, 
5,799 ,388 
4,774,366, 
4,775,503, 
5,804,560, 
5,736,560, 
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4,621,382, 
5,670,580, 
5,582,760, 
5,503,702, 
5,516,548, 
5,994,416, 
5,546,396, 
5,406,501, 
5,325,653, 
5,450,689, 
5,966,569, 
5,615,440, 
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4,619,386, 
5,445,315, 
5,334,195, 
5,353,104, 
5,469,129, 
5,583,266, 
5,620,386, 
5,511,251, 
5,466,109, 
5,553, 2, 


5,640, 87,. 


5,663,220, 
5,633,372, 


5,421,482, 
5,647,481, 


85,682,443, 
85,678,364, 


4,528,503, 


85,513,401, 
85,546,283 


4,421,482, 


85,409,368, 
85,428,294 


5,770,465, 
5,765,416, 


5,771,453, 
5,815,417, 


5,762,365, 
5,792,534, 
4,754,509, 
5,744,560 


5,644,413, 
5,667,634, 
5,558,766, 
5,499 ,666, 
5,529,512, 
5,608,401, 
5,515,410, 
5,375,537, 
5,334,681, 
5,484,669, 
5,583,534, 
5,614,401 


5,584,382, 
5,399,282, 
5,328,171, 
5,380, 97, 
5,495,150, 
5,597,299, 
5,586,355, 
5,496,214, 
5,469, 71, 
5,587, 11, 
5,644,112, 
5,663,260, 
5,621,386 


5,466,496, 
5,688 ,464 


85,633,406, 
85,652,317, 
85,567,439, 
85,576,325, 


85,450,427, 
85,460,318, 


5,777 ,456, 
5,744,433, 


5,766,447, 
5,822,412, 


5,751,380, 
5,800,560, 
5,747,534, 


5,659,462, 
5,652,689, 
5,540,759, 
5,499 ,628, 
5,550,472, 
5,621,380, 
5,470,437, 
5,347,580, 
5,369,697, 
5,510,645, 
5,598,496, 


5,540,369, 
5,366,249, 
5,323,147, 
5,406, 99, 
5,531,191, 
5,607,331, 
5,547,313, 
5,485,180, 
5,479, bh, 
5,610, 33, 
5,650,137, 
5,656,307, 
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5,928,503, 


85,674,400, 
85,685 ,342 
85,516,460, 
85,523,341, 


85,408,424, 
85,419,314, 


5,783,444, 
5,746,448, 


5,767,433, 
5,815,407, 


5,751,391 
5,796,560, 
5,740,560, 


5,669,518, 
5,613,738, 
5,520,737 
5,507,588, 
5,571,440, 
5,583 ,386 
5,432,471, 
5,331,620, 
5,405,700 
5,940,607, 
5,608,470, 


5,484,340, 
5,347,224, 
5,335,119 
5,436,109, 
57962 ,229, 
5,614,359 
5,526,282, 
5,472,144, 
59,507, 20 
5,625, 52, 
5,658,174, 
5,643,351 
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Figure 2.6 

Four overlapping images of a 
ball used in a bouncing ball 
animation and the colour 
codes used for different 
images 


pixel, i.e. we can imagine the image memory as two one-bit planes. 

If the two planes have 0,0 in a pixel position, then the display 
image is a background point (Figure 2.9a). 

If the two planes have 0,1 in a pixel position then the display 
image is a foreground point (Figure 2.9b). 

1,0 means a midground point (Figure 2.9c). 


Colour code 1 
(image1 only) 


Colour code 3 
(image1 and image 2 overlap 


Colour code 2 
(image2 only) 


Colour code 6 


(image2 and image3 overlap) 


Colour code 4 
{image3 only) 


Colour code 12 
(image3 and image4 overlap) 


Colour code 8 
(image4 only) 
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Finally 1,1 means a foreground point but this time one that is 
obscuring a midground point (Figure 2.9d). 
Thus we have: 


00 = background point 
01 = foreground point 
10 = midground point 
11 = foreground point (obscuring a midground point) 


WNr © 


Note that we use two logical colour codes to represent the 
foreground. This is because we can have two types of foreground 
points — a foreground point obscuring a background point only, and 
a foreground point obscuring a midground point. We can now give 
a few examples of priority plotting and you can generalise from 
these examples. 


To PLOT in the foreground 
We precede any plot statements with GCOL 1,1 (inclusive OR): 


GCOL 1,1 
PLOT statements to plot figures in foreground plane 


Now because 


00 OR 01 = 01 
background foreground foreground 
and 
10 OR 01 = pH 
midground foreground foreground 
(obscuring 
midground) 


Figure 2.7 
background and midground points are obscured by foreground ts ‘frames’ for a buzzing 


points (Figure 2.10a). bee 
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Logical image planes Composite display image 
(The figures are meant to be solid or filled) 


Initial image—a circle in the foreground against a triangle in the midground 


aN 


fs 
fe) |& 


Delete midground from initial image 


Add to foreground in initial image 


Add to midground in initial image 
L 


Seer 
43 = 
Figure 2.8 
Common operations that can 
be performed with a simple 
two-level priority scheme for 
images 
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To PLOT in the midground 
We precede any PLOT statements with GCOL 1,2 (inclusive OR): 


GCOL 1,2 
PLOT statements to plot a figure in the midground plane 


Now because 


00 OR 10 = 10 
background midground midground 
and 
01 OR 10 = 11 
foreground midground foreground 


| 
7 


A background point 


A foreground point 


| 
le 


A midground point 


F 
se) Figure 2.9 
Various bit combinations at a 
pixel and their significance in 
An (obscuring) a midground/foreground 
foreground point priority scheme 


aitatistas 
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background points are obscured by midground points as you would 
expect, but points that are are already foreground remain in the 
foreground colour, but with code 11 indicating that they are obscur- 
ing a midground point (Figure 2.10b). Thus to build up information 
in these two planes we use GCOL 1 (inclusive OR). You can perhaps 
see from this that after a composite set of planes has been built up 
any subsequent additions to the foreground or midground will be 
incorporated into the composite image according to their respective 
priority. 


To DELETE from foreground and midground 

Now to delete images or parts of images from planes we use GCOL 2 
(AND). To delete a foreground object, we redraw the object after 
using GCOL 2,2, where the second parameter happens to be the 
midground colour but is used here as a ‘foreground delete code’. To 


10 MODE 1 : PRINT TAB(4,2)"2 priority planes demonstration" 


20 VDU 23,1,0;0;0;0; 
30 VDU 19, 3,1, 0,0,0 
40 GCOL 1,1 


50 PROCword(200,3,3,100,1000) 


60 key=GET 
70 GCOL 1,2 


80 PROCword(220,2.8,2.8,96,2000) 


90 key=GET 
100 GCOL 2,2 


110 PROCword(200,3,3,100,1000) 
120 key=GET : MODE 7 : END 


130 DEF PROCword(y,xscale,yscale,xstep,lineno) 
140 LOCAL letters,i,p,rx,ry,x 


150 RESTORE Lineno 
160 READ Letters 


170 =x=(€1280-Letters*xstep*xscale)/2 


180 FOR i=1 TO letters 


190 MOVE x,y 

200 READ no 

210 FOR j=1 TO no 
220 READ p,rx,ry 
230 x=x+rx*xscale : y=ytryxyscale 
240 PLOT pt4,x,y 
250 key=INKEY (5) 
260 NEXT j 

270 x=x+xstep*xscale 
280 NEXT 7 

290 ENDPROC 

1000 DATA 4 

1010 REM "F" 


1020 DATA 11 


Program 2.8 Two image planes, foreground and midground. 
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delete a midground object, we use GCOL 2,1. For example to delete 
from the foreground: 


GCOL 2, 2 
PLOT statements to delete figure from foreground plane 


and the PLOT statements will be exactly the same as the ones that 
were used to draw the object being deleted. Now we have 


00 AND 10 = 00 
background background 
i.e. background points remain as background. 
01 AND 10 = 00 
foreground background 


‘ordinary’ foreground points revert to background. 


1030 DATA 0,16,0, 81,-16,128, 81,16,0, 0,0,-16, 81,64,16, 81,0,-16, 
0,-64,-40, 0,0,-16, 81,36,16, 81,0,-16, 0,-52,-56 

1040 REM "oO" 

1050 DATA 19 

1060 DATA 0,24,16, 0,-24,0, 81,16,8, 81,-16,88, 81,16,-8, 
81,0,24, 81,8,-16, 81,40,16, 81,-8,-16, 81,24,0, 
81,-16,-8, 81,16,-88, 81,-16,8, 81,0,-24, 
81,-8,16, 81,-40,-16, §1,8,16, 81,-24,0, 0,0,-16 

1070 REM "R" 

1080 DATA 20 

1090 DATA 0,16,0, 81,-16,128, 81,16,0, 0,0,-16, 81,40,16, 
81,0,-16, 81,8,16, 81,0,-24, 81,16,8, 81,-16,-28, 
81,16,-8, 81,-24,0, 81,8,-16, 81,-48,16, 81,0,-16, 
0,16,0, 0,16,0, 81,16,-60, 81,16,0, 0,-80,0 

1100 REM "E" 

1110 DATA 16 

1120 DATA 1,80,0, 81,0,16, 1,-80,0, 81,0,-16, 1,0,128, 
81,16,-128, 81,0,128, 1,64,0, 81,0,-16, 1,-64,0, 
81,0,16, 0,0,-56, 1,36,0, 81,0,-16, 1,-36,0, 81,0,16 

2000 DATA 3 

2010 REM "M"' 

2020 DATA 10 

2030 DATA 1,16,0, 81,-16,128, 81,16,-44, 81,24,0, 81,0,-24, 
81,40,68, 81,-16,-44, 81,16,-84, 81,-16,0, 0,-64,0 

2040 REM "I" 

2050 DATA 12 

2060 DATA 1,0,16, 81,80,-16, 81,0,16, 1,-32,0, 1,0,96, 81,-16,-%6, 
81,0,96, 1,-32,0, 1,0,16, 81,80,-16, 81,0,16, 0,-80,-128 

2070 REM "D" 

2080 DATA 16 

2090 DATA 0,16,0, 81,-16,128, 81,16,0, 0,0,-16, 81,40,16, 
81,0,-16, 81,8,16, 81,0,-24, 81,16,8, 81,-16,-88, 
81,16,-8, 81,-24,0, 81,8,-16, 81,-48,16, 81,0,-16, 0,-16,0 
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Figure 2.10 10 AND 10 = 10 

Examples of drawing and midground midground 

deleting in foreground and an ae yon ; 

midground priority planes: ordinary’ midground points are left unaltered. 

(a) F plotted after GCOL 1,1; = 

(b) M plotted after GCOL 1,2; a AND 10 ” 

(c) M is revealed if F is ‘obscured’ midground points are now revealed (Figure 2.10c). Thus 
replotted after GCOL 2,2 GCOL 2 (AND) can be used to delete and reveal. 


These operations are demonstrated by Program 2.8. The word 
‘FORE’ is first plotted in red in the foreground plane. The word 
‘MID’ is then plotted in yellow in the midground plane (using 
GCOL 1,2). The program then goes on to replot the word ‘FORE’ 
under the control of a GCOL 2,2 statement. This has the effect of 
revealing any previously hidden parts of the midground image. 
Time delays are included to make the effect easier to see. 


10 CLS:PRINT "4 priority planes demonstration"' 

20 PRINT "FCoreground)"'"MCidground)" 
"’RCearground)"'"'DCistance)"'' 

30 PRINT "Select plane for animation(F/M/R/D):"; 

40 ans$=GETS$ 

50 plane=INSTR("FMRD" ,ans$) 

60 IF plane=0 THEN END 

70 cardraw=2"(plane-1) : cardelete=15-cardraw 

80 MODE 2 


90 vDU 19, 1,5, 0,0,0, 19, 3,5, 0,0,0 
100 VDU 19, 7,5, 0,0,0, 19, 9,5, 0,0,0 
110 VDU 19, 11,5, 0,0,0, 19, 13,5, 0,0,0 
120 VDU 19, 15,5, 0,0,0 
130 VDU 19, 2,3, 0,0,0, 19, 6,3, 0,0,0 
140 VDU 19, 10,3, 0,0,0, 19, 14,3, 0,0,0 
150 VDU 19, 4,1, 0,0,0, 19, 12,1, 0,0,0 
160 VDU 19, 8,4, 0,0,0 


Program 2.9 Four image planes (foreground, midground, rearground and distant) with car animated in 
selected plane. 
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Composite image with priority (4 planes plus background) 
On the BBC Micro and Electron, in MODE 2, we have 4 bit colour 
codes (16 colours) and this gives us many more possibilities. Pro- 
gram 2.9 illustrates one such possibility. 

In this program, we have set up four planes plus background: 


foreground (magenta) 
midground (yellow) 
rearground (red) 
distant (blue) 
background (black) 


The different colour codes for a pixel together with their significance 
are given in Table 2.5. Each bit in a colour code represents one of the 
four planes. 

The GCOL 1 colour code for drawing contains a one in the bit 
position for the plane involved and zeros in the other bit positions. 
The GCOL 2 colour code for erasing contains a zero bit for the plane 
in which erasing is taking place and ones for the planes that are to be 
unaffected. The GCOL statements needed for drawing or erasing in 
each plane without affecting the other planes are listed in Table 2.5. 

The program plots an image in three of the four available planes, 
the plane to be omitted being selected by the user at the keyboard. 
The program then ‘drives’ a small car across the screen in the plane 
that contains no image (see Colour Plate 2). Although the car is 
made up of user defined characters, these are printed in “VDU 5’ 
mode so that the printing of the car takes place under the control of 
any GCOL statements that are active. This means that printing the 
car after a GCOL 1 statement has the effect of plotting the car in the 


170 PROCdefinecar 


180 IF plane<>1 THEN PROCword(200,1,2,200,1,1000) 

190 IF plane<>2 THEN PROCword(280,0.9,1.75,190,2,2000) 
200 IF plane<>3 THEN PROCword(360,0.8,1.5,180,4,3000) 
210 IF plane<>4 THEN PROCword(440,0.7,1.25,170,8,4000) 


220 VDU 5 

230 cx=0:cy=460 

240 GCOL 1,cardraw 

250 MOVE 0,cy-68 : PLOT 1,1279,0 

260 MOVE cx,cy:PRINTcar$ 

270 FOR step=1 TO 34 

280) = nx=cx+t32 

290 GCOL 2,cardelete:MOVE cx,cy:PRINTcar$ 
300 GCOL 1,cardraw:MOVE nx,cy:PRINTcar$ 
310 = cx=nx 

320 NEXT 

330 k=GET : MODE 7 : END 


continued 
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340 DEF PROCdefinecar 

350 VDU 23,224,800,878 ,&FC ,&FC,&FE,&FE ,&87 ,&87 

360 VDU 23,225,868 ,&8E8,8E4,844 ,&FC,&8E4,&FF ,&FF 

370 =6©VDU 23,226,800,800,800 ,800,81E,&81E ,8E1,&E1 

380 = VDU 23,227,&B7 ,&87 ,&7B,&7B,&78 ,&78 ,&30,&30 

390 §=VDU 23,228,&FF,&FF,&FF,&FF,&03,&03 ,&00,&00 

400 VDU 23,229,8ED,&ED,&DE ,&DE ,&DE ,&DE ,&0C ,&0C 

410 carS=CHRS224+CHRS$225+CHRS226 + CHRS8+CHRS8+CHRS8+CHRS10 + 
CHR$227+CHRS228+CHRS$229 

420 ENDPROC 


430 DEF PROCword(y,xscale,yscale,xstep,col,lineno) 
440 LOCAL letters,i,p,rx,ry,x 

450 RESTORE Lineno 

460 GCOL 1,col 

470 READ Letters 

480 x=(1280-Lletters*xstep*xscale)/2 

490 FOR i=1 TO letters 

500 MOVE x,y 


510 READ no 

520 FOR j=1 TO no 
530 READ p,rx,ry 
540 x=xtrxexscale : y=ytry*yscale 
550 PLOT p+4,x,y 
560 NEXT j 

570 x=x+xstep*xscale 
580 NEXT i 

590 ENDPROC 

1000 DATA 4 

1010 REM "F" 


DATA for "FORE" and "MID" as before. 


3000 DATA 4 

3010 REM "R" 

3020 DATA 20 

3030 DATA 0,16,0, 81,-16,128, 81,16,0, 0,0,-16, 81,40,16, 
81,0,-16, 81,8,16, 81,0,-24, 81,16,8, 81,-16,-28, 
81,16,-8, 81,-24,0, 81,8,-16, 81,-48,16, 81,0,-16, 
0,16,0, 0,16,0, 81,16,-60, 81,16,0, 0,-80,0 

3040 REM "E" 

3050 DATA 17 

3060 DATA 1,80,0, 81,0,16, 1,-80,0, 81,0,-16, 1,0,128, 
81,16,-128, 81,0,128, 1,64,0, 81,0,-16, 1,-64,0, 
81,0,16, 0,0,-56, 1,36,0, 81,0,-16, 1,-36,0, 
81,0,16, 0,-32,-72 

3070 REM "A" 

3080 DATA 13 


Program 2.9 continued 


3090 


3100 
3110 
3120 


4000 
4010 
4020 
4030 


4040 
4050 
4060 


4070 
4080 
4090 


4100 
4110 
4120 


4130 
4140 
4150 


4160 
4170 
4180 


4190 
4200 
4210 


4220 
4230 
4240 
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DATA 1,32,128, 81,-16,-128, 81,32,128, 1,32,-128, 
81,-16,0, 1,-16,128, 81,-16,0, 0,0,-68, 1,-4,-16, 
81,24,0, 1,-4,16, 81,-16,0, 0,-32,-60 

REM ''R" 

DATA 20 

DATA 0,16,0, 81,-16,128, 81,16,0, 0,0,-16, 81,40,16, 
81,0,-16, 81,8,16, 81,0,-24, 81,16,8, 81,-16,-28, 
81,16,-8, 81,-24,0, 81,8,-16, 81,-48,16, 81,0,-16, 
0,16,0, 0,16,0, 81,16,-60, 81,16,0, 0,-80,0 

DATA 8 

REM "pt 

DATA 16 

DATA 0,16,0, 81,-16,128, 81,16,0, 0,0,-16, 81,40,16, 
81,0,-16, 81,8,16, 81,0,-24, 81,16,8, 81,-16,-88, 
81,16,-8, 81,-24,0, 81,8,-16, 81,-48,16, 81,0,-16, 0,-16,0 

REM wpe 

DATA 12 

DATA 1,0,16, 81,80,-16, 81,0,16, 1,-32,0, 1,0,96, 81,-16,-96, 
81,0,96, 1,-32,0, 1,0,16, 81,80,-16, 81,0,16, 0,-80,-128 

REM "gu 

DATA 20 

DATA 0,0,16, 81,64,-16, 81,-8,16, 81,24,0, 81,-16,8, 
81,16,32, 81,-16,-8, 81,0,24, 81,-8,-16, 81,-32,16, 
81,-8,-16, 81,0,24, 81,-16,-8, 81,16,32, 81,-16,8, 
81,24,0, 81,-8,16, 81,64,-16, 81,0,16, 0,-80,-128 

REM ie rl 

DATA 9 

DATA 0,48,0, 0,-16,0, 81,16,112, 81,-16,0, 1,-32,0, 1,0,16, 
81,80,-16, 81,0,16, 0,-80,-128 

REM tat 

DATA 13 

DATA 1,32,128, 81,-16,-128, 81,32,128, 1,32,-128, 81,-16,0, 
1,-16,128, 81,-16,0, 0,0,-68, 1,-4,-16, 81,24,0, 
1,74,16, 81,~16,0, 0,-32,-60 

REM mye 

DATA 10 

DATA 0,16,0, 81,-16,128, 81,16,-32, 81,0,32, 81,48,-128, 
81,0,32, 81,16,-32, 81,-16,128, 81,16,0, 0,-80,-128 

REM her 

DATA 21 

DATA 0,64,92, 1,16,0, 81,-16,12, 81,16,4, 81,-28,4, 
81,8,16, 81,-32,-16, 81,-8,16, 81,-4,-24, 81,-16,4, 
81,16,-80, 81,-16,-8, 81,28,-4, 81,-8,-16, 81,32,16, 
81,8,-16, 81,4,24, 81,16,-8, 81,-16,24, 81,16,0, 0,-80,-40 

REM ia ad 

DATA 16 

DATA 1,80,0, 81,0,16, 1,-80,0, 81,0,-16, 1,0,128, 
81,16,-128, 81,0,128, 1,64,0, 81,0,-16, 1,-64,0, 

81,0,16, 0,0,-56, 1,36,0, 81,0,-16, 1,-36,0, 81,0,16 
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appropriate plane. Printing the car after a GCOL 2 statement with 
the appropriate ‘delete code’ will erase the car in readiness for 
printing it in a new position. 

An obvious application of this priority arrangement is in the 
implementation of an on-screen dial clock. The digits round the dial 
are in the ‘distance’, the hour hand is in the ‘rear’, the minute hand 
is in the ‘midground’ and the second hand is in the ‘foreground’. 
The use of this arrangement for the hands means that one hand can 
be deleted and redrawn in its new position without deleting any 
digits or any other hand that is ‘underneath’. Such a clock is imple- 
mented in Program 2.10 (see Figure 2.11). 

Another possible priority arrangement would be to have only 
three priority levels, but with three foreground colours. A possible 
application and the colour code settings required are listed in Table 
2.6. 


Table 2.5 Colour codes for a four level image priority system and the GCOL 
statements needed to plot in different image planes 


COLOUR CODES 


actual 

code binary colour interpretation 

1 0001 magenta fore 

3 0011 magenta fore obscuring mid 

5 0101 magenta fore obscuring rear 

7 0111 magenta fore obscuring rear, mid 

9 1001 magenta fore obscuring distant 
11 1011 magenta fore obscuring distant, mid 
13 1101 magenta fore obscuring distant, rear 
15 1111 magenta fore obscuring distant, rear, 

mid 

2 0010 yellow mid 

6 0110 yellow mid obscuring rear 
10 1010 yellow mid obscuring distant 
14 1110 yellow mid obscuring distant, rear 

4 0100 red rear 
12 1100 red rear obscuring distant 

8 1000 blue distant 

0 0000 black background 
GCOL STATEMENTS 

draw erase 

foreground GCOL 1,1 GCOL 2,14 
midground GCOL 1,2 GCOL 2,13 
rearground GCOL 1,4 GCOL 2,11 
distant GCOL 1,8 GCOL 2, 7 
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2.6 BASIC INTERACTION TECHNIQUES 


In this section two interaction techniques are implemented. Both of 
these use the keyboard, but clearly the principles are the same for 
either a keyboard or a more convenient device such as a digitiser. 
Both interaction techniques can be used in picture construction and 
this forms a part of most CAD (Computer Aided Design) systems. 
Such techniques enable designers to work in a two-dimensional or 
picture domain. This means for example that an electrical engineer 
can work with circuit diagrams and an architect with elevations or 
other projections of buildings, rather than just numbers. CAD 
techniques are an extensive topic by themselves and we shall only 
be concerned here with picture or line-drawing generation. It is not 
out of place to examine just briefly how such techniques ‘fit in’ to 
CAD programs. A CAD program that accepts a picture as input has 
to deduce certain information from it. An electrical engineer may 
draw a circuit diagram as input. A simple but somewhat unrealistic 


Figure 2.11 

Use of a four level priority 
scheme to implement a dial 
clock: (a)(b) The second hand 
in plane 1 (foreground) 
moving over the minute hand 
in plane 2 and the numbers in 
plate 4; (c)(d) The second 
hand in plane 1 sweeping 
over the minute hand in 
plane 2 and the hour hand in 
plane 3. The minute hand is 
in the process of sweeping 
over the hour hand 
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Table 2.6 A three level image priority scheme with three foreground 
colours 


3 foreground colours (spaceships?) 


1 midground colour (planets?) 
1 rearground colour (stars?) 
1 background colour (sky?) 
actual 
code binary colour interpretation 
1 0001 red fore 
2 0010 green fore 
3 0011 yellow fore 
5 0101 red fore obscuring mid 
6 0110 green fore obscuring mid 
7 0111 yellow fore obscuring mid 
9 1001 red fore obscuring rear 
10 1010 green fore obscuring rear 
11 1011 yellow fore obscuring rear 
13 1101 red fore obscuring mid, rear 
14 1110 green fore obscuring mid, rear 
15 1111 yellow fore obscuring mid, rear 
4 0100 blue mid 
12 1100 blue mid obscuring rear 
8 1000 magenta rear 
0 0000 black background 


10 DIM sin(59),cos(59) 

20 FOR t=0 TO 59 

30 = sin€t)=SINCRAD(90-6*t) ) 

40 ~cos(t)=COS CRAD(90-6*t)) 

50 NEXT t 

60 sin2=SINCRAD(2)) : cos2=COSCRAD(2)) 

70 sin4=SINCRAD(4)) =: cos4=COSCRAD(4)) 

80 INPUT "Time, hours",h'" minutes" ,m 

90 TIME=(h*60+m) *6000 

100 MODE 2 : VDU 5 : VDU 29,638;512; 

110 VDU 19,1,0,0,0,0, 19,3,0,0,0,0, 19,5,0,0,0,0 
120 vbDU 19,9,0,0,0,0, 19,11,0,0,0,0, 19,13,0,0,0,0 


9, 

130 VDU 19,15,0,0,0,0, 19,2,1,0,0,0, 19,6,1,0,0,0 
140 VDU 19,10,1,0,0,0, 19,14,1,0,0,0, 19,4,4,0,0,0 
150 VDU 19,12,4,0,0,0, 19,8,0,0,0,0, 19,0,7,0,0,0 
160 r=432 


170 xshift=32 

180 GCOL 1,8 

190 FOR dig=1 TO 12 

200 =theta=5*dig MOD 60 


Program 2.10 A dial clock with second, minute and hour hands. 
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R2 
R1 
Figure 2.12 
A series parallel resistor 
combination to be constructed 
R3 on the screen 


example serves to illustrate the point; say he inputs a series parallel 
resistor configuration (Figure 2.12). From this the CAD program will 
have to deduce that a resistor is connected in series to two resistors 
in parallel and that the total resistance is: 


RT = R1 + R2*R3/(R2 + R3) 


It can then evaluate numerical calculations and output required 
information graphically or otherwise back to the user. The CAD 
program will also be able to cope with alterations to the diagram — 
additions, deletions etc. 

The circuit diagram could be built up using a technique known as 
‘picking and dragging’. A user is presented with a menu of objects 
and can pick a particular object and drag it to anywhere on the 
screen (Figure 2.13). 

Other operations that might be available on objects are magnifica- 
tion and rotation. Again in the case of an electrical circuit diagram, 
in parallel with the picture-drawing modules there will be pro- 
cedures that keep track of the spatial relationship between compo- 
nents. The CAD program can then build up a formula reflecting 
some required attribute or behaviour of the circuit. This might be 


210 x=rxcos(theta) : y=r*sin(theta) 
220 MOVE x-xshift,y+16 : PRINT ;dig 
230 ~=IF dig=9 THEN xshift=64 

240 NEXT dig 

250 r=502 : MOVE O,r 

260 FOR t=1 TO 59 

270 = DRAW rxcos(t),rxsin(t) 

280 NEXT t 

290 DRAW 0,r 

300 secr=474 : minr=432 : hourr=368 
310 seconds=TIME DIV 100 MOD 60 

320 minangle=TIME DIV 6000 MOD 60 

330 hourangle=TIME DIV 72000 MOD 60 
340 GCOL 1,1 : PROCsecond 

350 GCOL 1,2 : PROCminute 

360 GCOL 1,4 : PROChour 

370 forever=FALSE 

380 REPEAT 

390 PROCchecksecond 

400 PROCcheckminute 


continued 


68 = Art of microcomputer graphics 


a a. 
Tv 
Figure 2.13 L 
A screen layout for picking 
and dragging 


transfer characteristic, frequency response, etc. The computer pro- 
grams view of the problem is numerical or formula based while the 
engineer’s view remains pictorial. This is a tremendous advantage 
in most design problems. 

In the same way an architect may sketch in the elevations of a 
house and ask for costing, insulation or sunlight calculations. 

In the next two sections we look at the front end of such CAD 
programs by looking first at how we can sketch line drawings on the 


410  PROCcheckhour 
420 UNTIL forever 


430 DEF PROCchecksecond 

440 newseconds=TIME DIV 100 MOD 60 

450 IF newseconds=seconds THEN secondmoved=FALSE : ENDPROC 
460 GCOL 2,14 : PROCsecond 

470  seconds=newseconds 

480 GCOL 1,1 : PROCsecond 

490  secondmoved=TRUE 

500 ENDPROC 


510 DEF PROCsecond 

520 MOVE 0,0 

530 DRAW secr*cos(seconds),secr*sin(seconds) 
540 ENDPROC 


550 DEF PROCcheckminute 

560 IF NOT secondmoved THEN ENDPROC 

570 newminangle=TIME DIV 6000 MOD 60 

580 IF minangle=newminangle THEN ENDPROC 
590 GCOL 2,13 : PROCminute 

600 minangle=newminangle 

610 GCOL 1,2 : PROCminute 

620 ENDPROC 


Program 2.10 continued 
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screen, and second how we can pick and drag predefined sub- 
pictures across the screen. 


Rubberband line drawing 

Using this technique we can build up a sketch or line drawing on the 
screen, using line segments whose length and direction are con- 
trolled from the keyboard. The program starts off by drawing an 
arbitrary line from (0,0) to (640,512). By using the cursor arrows as 
direction indicators we can move the end point of the line anywhere 
we want. Key F can be used to ‘Fix’ the end point of the line and a 
new line can then be ‘grown’ from the fixed endpoint of the pre- 
vious line. See Figure 2.14. 

Program 2.11 illustrates the technique of ‘rubberbanding’. ‘xs’ 
and ‘ys’ always represent the start position of the line currently 
being drawn and ‘x’ and ‘y’ represent the position of the end of the 
line being moved. The program consists of a REPEAT loop that 
processes commands UNTIL the key Q (Quit) is typed. 

The program always enters PROCprocesscommand having read 
the next command character. PROCcountcoms is then used to count 
any repeats of the command character in case the command key is 
being held down. If the command key is a movement key, then this 
count will be used in changing ‘x’ or ‘y’ by an appropriate multiple of 
the basic increment. PROCprocesscommand then checks for a valid 


630 DEF PROCminute 
640 = PROCfathand(minr,minangle,sin2,cos2) 
650 ENDPROC 


660 DEF PROCcheckhour 

670 IF NOT secondmoved THEN ENDPROC 

680 newhourangle=TIME DIV 72000 MOD 60 

690 IF hourangle=newhourangle THEN ENDPROC 
700 = =GCOL 2,11 : PROChour 

710 hourangle=newhourangle 

720 GCOL 1,4 : PROChour 

730 ENDPROC 


740 DEF PROChour 
750 = PROCfathand(hourr,hourangle,sin4,cos4) 
760 ENDPROC 


770 DEF PROCfathand(r,theta,sininc,cosinc) 

780 =x=rxcos(theta) : y=r*sin(theta) 

790 3=x2=x/2 : y2=y/2 

800 MOVE x2*cosinc-y2*sininc,x2*sinincty2*cosinc 

810 MOVE x,y : PLOT 85,0,0 

820 PLOT 85,x2*cosincty2*sininc,-x2*sinincty2*cosinc 
830 ENDPROC 
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Start of program Line endpoint can be moved Key F depressed 
line drawn from (0,0) anywhere 1st line permanently drawn 
2nd line started 


This line can be moved anywhere Thus any shape can be built up 
and key F depressed again 


Figure 2.14 command and calls PROCdrawordelete to delete the line in its 
Using a rubberbanding current position. If ‘F’ has been pressed, then the line currently 
program to construct a being operated on is fixed and the current point (x,y) is set as the 


straight line drawing start point for a new line. If one of the cursor arrows has been 


pressed, then one of the coordinates x,y is updated by an amount 
that is determined by the number of copies of the current command 
character that were received. This number will be proportional to 
the length of time for which the key was pressed. The *FX com- 
mands at lines 60 and 70 are used to increase the sensitivity of the 
keys. *FX 11 sets the delay before repeated copies of a character are 
sent to the computer by a continually depressed key. * FX 12 sets the 
delay between subsequent repeats of a character. (Each of these 
‘operating system commands’ must appear at the end of a separate 
numbered line.) For example: 


*FX 11,10 


This means that if a key is pressed for less than a tenth of a second, 
then only one character is sent by that key. 


*FX 12,1 


This now means that if a key is pressed for more than a tenth of a 
second, then repeated copies of the character are sent by the key 
every hundredth of a second. 

The coordinate increments, ‘xstep’ and ‘ystep’, are set to the 
dimensions of a pixel in the mode being used. PROCprocesscom- 
mand terminates by drawing a line to the position now specified by 
the x and y coordinates and by ensuring that ‘command$’ has been 
set to the next command character ready for the next execution of 
the main loop. 
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The critical statement in the program is GCOL 3, 1 (exclusive OR). 
Remember that the main property of this plotting operation is that 
two successive identical plots will restore the screen to its original 
state. This means that lines can be moved over existing lines without 
permanently wiping part of them out, as would be the case without 
this facility. Normally to delete an object we could re-plot the object 
in the background colour but this would wipe out intersecting parts 
of existing lines. Using the above method, an existing line dis- 
appears only momentarily while the current moving line passes 
over it. Thus line segment 2 (Figure 2.15) can be swept over existing 
line segment 1 without rubbing it out. This can be explained by 
reference to the following table. 


Table 2.7 Plotting in GCOL 3, 1 


1st DRAW 2nd DRAW 
old plotting new old plotting new 
0 1 1 1 1 0 
1 1 0 0 1 1 


You can see from the bottom row of the table that plotting a 1 on top 
ofa 1 in the first DRAW results in a zero that is restored to a 1 by the 
2nd DRAW. The top row shows the effect of a normal draw and 
erase function. The second DRAW thus erases or undraws, at the 


[| | 


1.!Draw the first 2. Draw a line to 
rectangle the start of the 
second 
4. Fix the invisible 5. Draw the new 


line & press 0 rectangle 


Figure 2.15 

Line segment 2 can be swept 
over line segment 1 without 
deleting it 


Figure 2.16 

Constructing two isolated 
rectangles using the line 
orvoff facility 


3. Switch off this 
line (press 0) 
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same time restoring any holes in existing lines made by the 1st 
DRAW. We leave it as an exercise to work out why the behaviour is 


unaltered if GCOL 3 is replaced by GCOL 4. 


In order that the user of Program 2.11 can ‘move the pen’ toa new 
starting position, we have included a line on/off facility that is 
controlled by the ‘O’ key. This key acts as a ‘push on/push off’ 
switch — a mechanism that we shall use again. The drawing action is 
prevented in PROCdrawordelete if the line is switched off. The 
process of constructing two isolated rectangles is illustrated in 


Figure 2.16. 


A further drawing aid that is included in Program 2.11 is the 
ability to switch on or off horizontal and vertical cursor lines. These 
make it easier to line up different parts of a drawing. ‘H’ is the on/off 
switch for the horizontal cursor line and ‘V’ is the on/off switch for 


the vertical cursor line. 


Figure 2.17 shows two images built up using rubber banding. 


MODE 4 : xstep = 4 : ystep = 4 
*FX 4,1 
REM *FX 4,1 disables cursor arrows for program use. 
Left$=CHR$136 : rightS=CHR$137 
up$ =CHR$139 : down$S =CHR$138 
REM cursor arrows are ASCI codes 136 to 139. 
comms$=Left$+right$tup$+down$+" FOHV" 
PRINT"Command: arrows/F/0/H/V/Q" 
xs = 0: ys = 0 
x = 640 : y = 512 
Lineof f=FALSE 
hcursor=FALSE : vcursor=FALSE 
GCOL 3, 1 
PROCdrawordelete 
*FX 11,10 
*FX 12,1 
command$=GET$ 
REPEAT 
PROCprocesscommand 
UNTIL command$ = "Q" 
PROCcountcoms 
*FX 4,0 
*FX 12,0 
MODE 7 : END 


DEF PROCprocesscommand 
IF command$="Q" THEN ENDPROC 
PROCcountcoms 
IF INSTR(comms$,command$) = 0 THEN command$=GETS 
PROCdrawordelete : PROCcheckcursors 
IF command$ = "F" THEN PROCfTix 
IF command$ = leftS THEN x = x - xstep*coms 


Program 2.11 ‘Rubber banding’ program for line drawing. 


: ENDPROC 
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Picking and dragging an object 

We have already mentioned the use of this particular technique 
above so we'll jump straight in to doing it. In Program 2.12 we have 
set up a menu of objects in the right hand side of the screen. An 
object is selected by typing 1, 2 or 3. In practice, if we were using this 
technique frequently, an object would be selected from the menu by 
pointing a light pen at the appropriate position on the screen. When 
an object is selected it is dragged into position and fixed as before. 
Instead of dragging a line we are now dragging a complete object. 
The program to drag an object is identical to the rubberband pro- 
gram with 


PROCdrawordelete 
replaced by: 


PROCdrawordelete(selection$) 


320 IF command$ 
330 IF commands 
340 IF commands 
350 IF command$ 


rightS THEN x = x + xstep*coms 

up$ THEN y = y + ystep*coms 

down$ THEN y = y —- ystep*coms 
"O' THEN Lineoff = NOT Lineoff 

360 IF command$S = "H" THEN hcursor = NOT hcursor 

370 ~=IF command$ "Vv" THEN vcursor = NOT vcursor 

380 PROCdrawordelete : PROCcheckcursors 

390 command$=GET$ 

400 ENDPROC 


410 DEF PROCcountcoms 

420 coms=0 

430 REPEAT : coms=coms+1 : nextcom$=INKEY$(11) 
440 UNTIL nextcom$<>command$ 

450 ENDPROC 


460 DEF PROCdrawordelete 

470 IF Lineoff THEN ENDPROC 
480 MOVE xs, ys : DRAW x, y 
490 ENDPROC 


500 DEF PROCfix 

510 REM Permanent draw 

520 GCOL 0,1 : PROCdrawordelete 
530 GCOL 3,1 

540 xs =x: yS=y 

550 ENDPROC 


560 DEF PROCcheckcursors 

570 IF hcursor THEN MOVE 0,y:DRAW 1279,y 
580 IF vcursor THEN MOVE x,0:DRAW x,1023 
590 ENDPROC 
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This procedure selects one out of the three drawing procedures and 
the selected object is drawn at a position under control of the 
directional keys. Figure 2.18 shows the screen during execution of 
Program 2.12. 


10 MODE 0 : xstep = 2 : ystep = 4 
20 VDU 23,1,0;0;0;0; 
30 *FX 4,1 
40 leftS=CHR$136 : rightS=CHR$137 
50 up$ =CHR$139 : down$ =CHR$138 
60 dragcomms$=Left$tright$+up$+down$+"F" 
70 PROCdrawmenu 
80 GCOL 3,1 
90 PROCpick 
100 REPEAT 
110 x=100 : y=100 
120 PROCdrawordelete(selection$) 
130 *FX 11,10 
140 *FX 12,1 
150  command$=GETS 
160 fixed = FALSE 
170 REPEAT 
180 PROCprocesscommand 
190 UNTIL fixed 
200 =*FX 12,0 
210 = PROCpick 
220 UNTIL selection$ = "Q" 
230 *FX 4,0 
240 MODE 7 : END 


250 DEF PROCdrawmenu 

260 MOVE 900,0 : DRAW 900,1000 

270 ~=PROCdrawresistor(1000,600) 

280 = PROCdrawcapacitor(1000,400) 

290 PROCdrawdiode(1000,200) 

300 PRINT TABC60,12);"1"; TAB(60,18);"2"; TAB(60,24) "3" 
310 ENDPROC 


320 DEF PROCpick 

330 PRINT TABCO,0);"Pick: (1/2/3/a) "; 
340 REPEAT : selection$=GETS 

350 UNTIL INSTRC''123Q",selection$) 

360 PRINT TAB(O,0);"Drag: Carrows/F)" 
370 ENDPROC 


380 DEF PROCprocesscommand 
390 PROCcountcoms 
400 IF INSTR(dragcomms$,command$)=0 THEN 
VDU7 : command$=GETS : ENDPROC 
410 PROCdrawordelete(selection$) 
420 IF commandS="F" THEN PROCfix : fixed=TRUE : ENDPROC 


Program 2.12 A simple ‘picking and dragging’ program. 
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Scaling and rotating a dragged object 

Other common facilities in picking and dragging programs are 
magnification and rotation. For example in the above dragging 
program, another key option could be ‘M’ for ‘Magnify’ and T (turn) 
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IF command$=left$S THEN x = 
IF command$=right$ THEN x = x+xstep*coms 
IF command$=up$ THEN y = yt+ystep*coms 
IF command$=down$ THEN y = y-ystep*coms 
PROCdrawordeLlete(selection$) 
command$=GETS 

ENDPROC 


DEF PROCcountcoms 
coms=0 
REPEAT : coms = coms+1 : nextcom$ = INKEY$(11) 
UNTIL command$<>nextcom$ 

ENDPROC 


DEF PROCfix 
GCOL 0,1:PROCdrawordelete(selection$) 
GCOL 3,1 

ENDPROC 


DEF PROCdrawordelete(s$) 
IF s$="1" THEN PROCdrawresistor(x,y) 
IF s$="2" THEN PROCdrawcapacitor (x,y) 
IF s$="3" THEN PROCdrawdiode(x,y) 
ENDPROC 


DEF PROCdrawresistor (x,y) 
MOVE x,y : PLOT 1,30,0 
PLOT 1,0,10 : PLOT 1,60,0 
PLOT 1,0,-20 : PLOT 1,-60,0 
PLOT 1,0,10 : PLOT 0,60,0 
PLOT 1,30,0 

ENDPROC 


DEF PROCdrawcapacitor(x,y) 
MOVE x,y : PLOT 1,30,0 
PLOT 0,0,-30 : PLOT 1,0,60 
PLOT 0,20,0 : PLOT 1,0,-60 
PLOT 0,0,30 : PLOT 1,30,0 

ENDPROC 


DEF PROCdrawdiode(x,y) 
MOVE x,y : PLOT 1,30,0 
PLOT 0,0,-25 : PLOT 1,0,50 
PLOT 1,25,-25 : PLOT 1,-25,-25 
PLOT 0,25,25 : PLOT 1,30,0 
ENDPROC 


x-xstep*coms 
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Figure 2.17 for rotation. The structural alterations now required in the program 
Two images constructed by are significant. In particular we have to change the way in which we 
rubberbanding store shape information. Currently this information is embedded in 


the drawing procedures as parameters of the PLOT 1 statement. The 
most convenient scheme is to store the current displacement coordi- 
nate values for an object in an array. These displacements will of 
course change as a function of the angle of rotation. Initially we 
could set up an array for a square, for example, as: 


640 DEF PROCdrawsquare(x,y) 

650 LOCAL i 

660 MOVE x,y 

670 FOR i=1 TO 3 

680 PLOT 1, squarex(i), squarey(i) 
690 NEXT i , 

700 ~=DRAW x,y 

710 ENDPROC 


Program 2.13 Drawing a square that is stored as a sequence of relative coordinates. 


900 DEF PROCrotatesquare 

910 LOCAL x,y,i 

920 = sintheta = SINCRAD(10)) 
930 costheta = COS(RAD(10)) 
940 FOR i = 1 TO 3 


950 xX = squarex(i) : y = squarey(i) 

960 squarex(i) = x*costheta + y*sintheta 
970 squarey(i) =-x*sintheta + y*costheta 
980 NEXT i 


990 ENDPROC 


Program 2.14 Rotating a square that is stored as a sequence of relative coordinates. 
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squarex(1) | 100 
(2) 0 
(3) | -100 


(2) | 100 
(3) |. 0 


squarey(1) T j 


To draw the square in any (dragged) position (x,y) we need 
PROCdrawsquare (presented as Program 2.13). This is the same 
scheme as we have in the component drawing procedures (earlier) 
except that we are now storing the displacements in an array. Now 
to rotate an object we would press T (turn) and make the object 
rotate by a predetermined angular increment of, say, 10° by altering 
the relative displacements. To do this we simply use a standard two- 
dimensional rotation transform (see Chapter 3). A procedure for 
doing this is listed as Program 2.14. Each time the key is depressed 
new displacements are calculated from the previous values. Note 
that the figure cannot be rotated and dragged at the same time. 
Techniques like these are extensively illustrated in Chapter 5. 


Saving a line drawing 
An image that has been created by rubberbanding can be saved as a 
list of coordinates and subsequently regenerated by a simple pro- 
gram reading the coordinates from a file and using DRAW. The 
coordinates can be saved initially in two parallel arrays and when 
the drawing is complete, the array contents dumped into a file. The 
coordinate saving should clearly be part of the ‘fixing’ process 
(Program 2.15). 

Similarly an image that has been created by picking and dragging 


Figure 2.18 

The screen during execution 
of the picking and dragging 
program (Program 2.12) 
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Figure 2.19 
Colouring a convex polygon 
with triangle fill 


an object can be saved, most economically, using three parallel 
arrays. The program would store, for each object, a pair of coordi- 
nates followed by a code indicating the class of object drawn at that 
position. The program would terminate by outputting the contents 
of the three arrays toa file. The regenerating program would contain 
the object-generating procedures again called from a shape selec- 
tion procedure, the appropriate procedure for each shape being 
selected according to the stored code. 


2.7 COLOUR PAINTING 


Interactive painting in computer graphics is now a well established 
but rather exotic technique depending on very expensive hardware. 
It is used in the advertising industry to generate both still and 
animated images and these are either created by the artist from 
scratch, or the techniques are used to enhance real images digitised 
via a TV camera. 

Interactive painting means building up a computer image using a 
light pen or similar device as a brush. A colour can be selected froma 
menu and used to fill an area of the screen. Various ‘textures’ might 
also be available to simulate brush strokes. 

On the BBC Micro or the Electron, we can go some way towards 
these systems. In interactive painting, as well as the ability to draw 
outlines using the techniques covered earlier, we also need to be 
able to colour these regions from a menu of colours. The colour 
photos of the building facade (Colour Plate 3) show convoluted 


500 DEF PROCfix 

510 REM Permanent draw 

520 GCOL 0,1 : PROCdrawordelete 

530 GCOL 3,1 

540 xs=x:ys=y 

545 line = line+1 

546 xcoord(line) = x : ycoord(line) = y 
550 ENDPROC 


Program 2.15 Remembering the points at which fixing took place in a rubber banding program. 
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regions being filled by different colour fill algorithms. 

Another requirement is to be able to extend the colour range 
available on a device by mixing or ‘dithering’ colours. This is 
covered later in this Chapter. In this section, we will examine how to 
fill regions using just flat colour. 

Filling the interior of a closed region can be accomplished by using 
the triangle fill facility (PLOT 80 to 87). However, not all closed 
figures can be easily filled using this method. To use the triangle fill 
facility the computer must use detailed knowledge of the shape of 
the region being plotted. For example, to fill any regular or irregular 
‘convex’ polygon, given an ordered sequence of vertices, we can use 
the simple expedient of moving to any point within the interior 
before plotting to each vertex (Figure 2.19). Colour fill then proceeds 
at the same time as tracing the boundary. Life becomes more com- 
plicated, however, when such a figure contains a hole or con- 
cavities. We end up with a filling technique that depends on the 
shape of the figure. An algorithm that finds a sequence of triangle 
fill operations for a non-convex region appears later in Chapter 5, 
but this needs a special data structure and will not work for regions 
with holes. Imagine trying to define a sequence of triangle fill 
operations that would colour the building facade in Colour plate 3. 
Anyway in interactive painting the outline will have been drawn 
before the colour fill takes place and clearly we want to be able to fill 
any region no matter how convoluted. We require an algorithm that 
will allow us to draw a closed region and then select a colour to fill it 
with. 

Algorithms that fill the interior of any closed figure are sometimes 
called ‘flood-fill’ algorithms and they work by assuming that the 
region to be filled is delineated by a boundary of pixels in a non- 
background colour and that the interior of the region is 
‘4-connected’. This means that all pixels within the region can be 
reached one from the other by a sequence of any of the movements 
up, down, left and right. The colour floods froma point in the region 
to a boundary. 

There are two approaches that we can make to this problem. One 
is recursive and is described later in Chapter 6. The other is non- 
recursive and uses a FIFO (first in, first out) buffer or queue. In this 
section, we present two different queueing algorithms for colour 
fill. The first algorithm (Program 2.16) is extremely slow, but it 
provides a good introduction to the ideas involved. Colour Plate 3b 
shows this algorithm in the course of filling the building facade, 
although we have only included a pair of circles in the program that 
drives the algorithm. You can see from the illustration that the filling 
proceeds with ‘diagonal wavefronts’. 


PROCfillfrom is initiated from a start point and that start point is 
coloured and added to a queue (by calling PROCfill). PROCfillfrom 
then repeatedly takes the first point from the queue and examines 
each of the neighbouring N, S, E and W pixels (by calling PROCfill 
for each of these points in turn). Each time PROCfill is called, it 


79 


80 


390 
400 


410 
420 
430 
440 
450 


Art of microcomputer graphics 


colours the point it is given (if it is not already coloured) and adds 
that point to the end of the queue. Adding a point to the queue in 
this way ensures that it will subsequently be removed from the 
queue and its neighbours examined. 

The reason the queue is made a FIFO is to ensure that duplicated 


qsize=200 : DIM queuex(qsize), queuey(qsize) 
r1=50 : r2=100 

MODE 1 : xstep=4 : ystep=4 
PROCcircle(r1,640,512) 
PROCcircle(r2,640,512) 

PROCTi LL from(640+(r14+r2)/2,512) 

k=GET : MODE 7 

END 


DEF PROCcircle(r,xc,yc) 
LOCAL t 
MOVE xctr,yc 
FOR t=10 TO 360 STEP 10 
DRAW xct+r*COS(RAD(t)) ,yct+r*SINCRAD(t)) 
NEXT t 
ENDPROC 


DEF PROCfillfrom(startx,starty) 
first=1 : last=0 
PROCfilLL(startx,starty) 
REPEAT 
PROCunqueue 
PROCfILL(x,ytystep) 
PROCFILL(x,y-ystep) 
PROCfILL(x+xstep,y) 
PROCfiLL(x-xstep,y) 

UNTIL first=(last+1) MOD qsize 

ENDPROC 


DEF PROCTILL(x,y) 
IF POINT(x,y)>0 THEN ENDPROC 
PLOT 69,x,y 
PROCqueue(x,y) 

ENDPROC 


DEF PROCqueue(x,y) 
Last=(last+1) MOD qsize 
queuex( lLast)=x 
queuey( Last)=y 

ENDPROC 


DEF PROCunqueue 
x=queuex(first) 
y=queuey (first) 
first=(first+1) MOD qsize 
ENDPROC 


Program 2.16 A simple point queueing colour fill algorithm. 
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points are quickly removed from the queue in order to prevent it 
becoming too large. If for example we made the queue an ordinary 
stack (LIFO or last in first out), as you may see suggested in some 
computer graphics textbooks, it would gradually fill up and would 
run out of memory on most micros. 

For the queue, we use two arrays, one for x-coordinates and one 
for y-coordinates. Two variables indicate the positions of the ‘first’ 
and ‘last’ items in the queue. The arrays are treated as circular so 
that when the end of the queue reaches the end of the arrays, the 
queue is ‘wrapped around’ and continued into the space that is now 
free at the start of the arrays (Figure 2.20). PROCfillfrom repeatedly 
takes the next point from the queue until the queue is empty. 
Although Program 2.16 is slow, it is worthy of study because of its 
simplicity. Figure 2.21 presents an illustrated sequence of how the 
program works for a simple rectangular region. The start point is at 
the bottom left hand corner. 


Horizontal fill facilities 

A common provision in graphics systems that operate with a raster 
scan display is a horizontal fill facility. Such a facility will typically be 
given the (x,y) coordinates of a point and will colour-fill pixels to the 
left and right of the given pixel as long as these pixels are in the 
background colour. 

On the BBC Micro, the first issue of the operating system did not 
provide such a facility, but this omission was rectified in later 
versions with a a new set of PLOT instructions which are also 
available on the Electron. 

First of all, we present a BASIC procedure (Program 2.17) that 
implements a horizontal fill without using the special PLOT com- 
mands. Anyone who still has OS 0.1 on the BBC Micro will need to 
do it this way. The method can also be seen as an explanation of the 
version of this procedure that uses the special PLOT facilities which 
are presented shortly. 


queue x 


queue x queue y 


4 The art of microcmputer ... 


Figure 2.20 

Organisation of a queue (or 
FIFO stack): when the end of 
the arrays is reached, the 
queue ‘wraps around’ 


queue y 
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pixel 1 is filled and added to the queue 


1st cycle of REPEAT ioop in PROCfillfrom pixel 1 is 2nd cycle, 
removed from queue and neighbouring points examined pixel 6 removed and neighbours examined 


© © ® ® ® 


queue is now 6, 2 pixels 6 and 2 are filled queue is now 2, 11, 7 pixels 11 and 7 are also filled 


3rd cycle, pixel 2 removed and neighbours examined 4th cycle, pixel 11 removed and neighbours examined 


queue is now 11, 7, 3 pixel 3 is filled queue is now 7, 3, 16, 12 pixels 16 and 12 are filled 
This sequence continues until the queue is empty 
Figure 2.21 A call of PROCfillalong will first colour-fill to the right of the given 


A sample colouring sequence _pixel until a non-background point is encountered. The same thing 

produced by the point is done to the left. Both scans are carried out using the subsidiary 

queueing algorithm procedure PROCdirectionfill whose parameter ‘dir’ indicates the 
direction of the scan. As a result of calling PROCfillalong, the two 
non-local variables ‘leftx’ and ‘right’ are set to values indicating the 
extent of the strip that was filled. The value of ‘xstep’ will indicate 
the width of a pixel and this will depend on the mode being used. 
For example, in MODE 1, ‘xstep=4’. 


DEF PROCfillalong(x,y) 

LOCAL nextx 
PROCdirectionfill(x,y,xstep) 
rightx=nextx-xstep 
PROCdirectionfill(x,y,-xstep) 
leftx=nextx+xstep 


ENDPROC 

DEF PROCdirectionfill(x,y,dir) 
nextx = x 
REPEAT 


PLOT 69,nextx,y 
nextx=nextx+dir 
UNTIL POINTC(nextx,y)>0 
ENDPROC 


Program 2.17 Filling a horizontal line of pixels between two boundary (non-background) points. 
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DEF PROCfilLalong(x,y) 
PLOT 77,x,y 
X%=CPblock : Y%=CPblock DIV 256 
AZ=80D : CALL &FFF1 
leftx=!CPblock MOD 65536 
rightx=!(CPblock+4) MOD 65536 
ENDPROC 


Program 2.18 Using PLOT 77 to fill a horizontal line of pixels between two boundary points. 


Also presented (Program 2.18) is an alternative version of PROC- 
fillalong that uses the PLOT 77 command for horizontal fill, now 
described. The statement 


PLOT 77, x, y 


scans left and right from the pixel specified by ‘x’ and ‘y’ until it 
reaches the last background point in both directions. A line is drawn 
between the two points reached. The rightmost point becomes the 
‘current graphics point’ and the leftmost point becomes the pre- 
vious graphics point. We now need to set ‘leftx’ to the x-coordinate 
of the previous graphics point and ‘rightx’ to the x-coordinate of the 
current graphics point. To do this we use the OSWORD call at lines 
320 to 330. This uses a block of store declared at the start of the 
program by: 


5 DIM CPblock 8 


You do not need to understand the details of how OSWORD calls 
work in order to use this ‘recipe’. This version of PROCfillalong is 
exactly equivalent to that described earlier. It is of course much 
faster. 

Another PLOT command that can be used to speed up execution 
of a fill algorithm is PLOT 92. The statement 


PLOT 92, x, y 


searches pixels to the right of (x,y) for a background point and sets 
the last non-background point reached as the current graphics 
position. 

Program 2.19 makes of these two PLOT commands. This 
algorithm works by queuing complete horizontal runs of pixels for 
checking, rather than single pixels. 

Note the difference in filling patterns between the two algorithms 
we have presented (Colour Plates 3b and 3c). 


2.8 INTERACTIVE DRAWING AND PAINTING 


An interactive design package should combine techniques for pro- 
ducing line drawings with colouring facilities, and we have done 
this in Program 2.20. 
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In Program 2.11, we used the cursor arrows to control our ‘rubber- 
banding’ program. There are many more convenient ways for in- 
putting line drawings and in Program 2.20 we have demonstrated 
how a single joystick and fire-button can be used in rubberbanding. 
This is probably the most widely available (and cheapest) analogue 
input device. Very similar programming techniques could be used 
to drive the program with a light-pen or with a graphics tablet or 
pad. Various interactive graphics devices are described at the end of 
this chapter. If you have none of these devices, you can of course 
revert to the use of the keyboard to drive the program. A recipe for 
converting the program to keyboard control is included at the end of 
the listing for Program 2.20. 

In Program 2.20, the joystick is used to move the cursor, and the 
fire-button is used to ‘Fix’ a point. In addition, keys are used to 
switch the cursor on or off (C) and to switch line plotting on or off 
(O). The program runs in MODE 1, and lines are always drawn in 
red. (A valuable exercise to improve your understanding of the 
program would be to implement extra key commands for changing 
the colour of the rubberband line.) Note that in this program we can 


5 DIM CPblock 8 
10 qsize=50 : DIM fromxq(qsize) ,toxq(qsize) ,yq(qsize) 


200 DEF PROCfillLfrom(x,y) 

210 LOCAL leftx,rightx,nextx,backx 
220 IF POINT(x,y)>0 THEN ENDPROC 
230 =first=1 : last=0 

240 =PROCfillalong(x,y) 

250 PROCqueue(leftx,rightx,y) 


260 REPEAT 

270 PROCunqueue 

280 PROCcheckalong(ytystep) 
290 PROCcheckalong(y-ystep) 


300 UNTIL first=Clast+1) MOD qsize 
310 ENDPROC 


320 DEF PROCcheckalong(y) 
330 LOCAL nextx 
340 IF POINT(fromx,y)=0 THEN nextx=f romx 
ELSE PROCfindback(fromx,y) :nextx=backx 
350 IF nextx>tox THEN ENDPROC 


360 REPEAT 

370 PROCfillLalong(nextx,y) 
380 PROCqueue(Leftx,rightx,y) 
390 PROCfindback(nextx,y) 

400 nextx=backx 


Program 2.19 Colour fill algorithm that queues horizontal strips of pixels. 
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make the joystick behave almost like a graphics tablet by holding 
down the fire button continuously as the device is moved. 

Program 2.20 includes fairly limited colouring facilities. The user 
can use a key to select one of three colours, W(hite), R(ed), ¥(ellow) 
and the region containing the cursor is filled with the selected 
colour. Note that the region to be filled must be completely sur- 
rounded by a boundary. If this is not the case, the colour will ‘leak’ 
out through any gaps in the boundary into other regions; a well 
known phenomenon, graphically known as bleeding. 

The colouring algorithm in Program 2.20 is an extended version of 
the line-queueing algorithm (Program 2.19). The extensions have 
been included to colour not only the selected region, but also the 
points on its boundary. This means that the region can be coloured 
and the end result does not leave a different coloured outline 
enclosing the region. (This may or may not be desirable.) 

In PROCfillalong, we use PLOT 76 (BBC OS 1.2 and Electron only) 
to find the extent of a horizontal line of background colour. This line 
and its two boundary points are then coloured by drawing a line 
from the pixel before the start of the line to the pixel after the end of 


410 UNTIL nextx>tox 
420 ENDPROC 


430 DEF PROCfillalong(x,y) 

440 PLOT 77,x,y 

450 X%=CPblock : Y%=CPblock DIV 256 
460 AZ=80D : CALL &FFF1 

470 ~—s Leftx=!CPblock MOD 65536 

480 =e rightx=!(CPblock+4) MOD 65536 
490 ENDPROC 


500 DEF PROCfindback(x,y) 

510 PLOT 92,x,y 

520 X%=CPblock : Y%=CPblock DIV 256 

530 AZ=&80D : CALL &FFF1 

540 backx=!(CPblock+4) MOD 65536 + xstep 
550 ENDPROC 


560 DEF PROCqueue(fx,tx,y) 

570 Last=(Last+1)MOD qsize 

580 =fromxq(last)=fx : toxq(last)=tx 
590 yq(last)=y 

600 ENDPROC 


610 DEF PROCunqueue 

620 =fromx=fromxq(first) : tox=toxq(first) 
630 y=yaq(first) 

640 =first=(first+1)MOD qsize 

650 ENDPROC 
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10 DIM CPblock 8 


the line. This is done by the rather empty procedure PROCcolour 
which will be extended later. In PROCfindback, the IF statement at 
line 900 is used to change the colour of any horizontal boundary 
runs. 


2.9 COLOUR MIXTURES — SUPER PIXELLING 


By mixing colours on the screen in different patterns, the program- 
mer can obtain the effect of many more than the four basic colours 
available in MODE 1, or the eight basic colours available in MODE 2. 
A recently coined term for such colour mixing is ‘stippling’. Let us 
see how we can use such colour mixing in our painting program. 

Because we are writing an interactive program it is important that 
any method that we use for mixing colours should result in fairly 
fast filling of regions. It is possible to extend our colouring algorithm 
so that an arbitrary region is filled with a colour mixture almost as 
fast as it is filled with pure colour by Program 2.20! 

First of all, let us look at the basic mixture patterns that we shall 
use for combining colours. Any region to be coloured will be divided 
into blocks where each block measures two pixels by two pixels — a 


20 qsize=50 : DIM fromxq(qsize) ,toxq(qsize) ,yq(qsize) 
30 MODE 1 : xstep=4 : ystep=4 


40 comms$ = "“OCWYR" 

50 lineon = TRUE 

60 cross = TRUE 

70 xs = 640 : ys = 512 


80 PROCreadjoystick : x=jx : y=jy 


90 GCOL 3, 1 

100 PROCdrawordelete 

110 REPEAT 

120 PROCrubber 

130 PROCprocesscommand 
140 UNTIL command$ = “Q" 
150 MODE 7 : END 


160 DEF PROCrubber 

170 PROCreadjoystick 
180 IF ABS(x-jx)<4 AND 
190  PROCdrawordelete 
200 x=jx : y=jy 

210 PROCdrawordelete 
220 ENDPROC 


230 DEF PROCreadjoystick 


ABS (y-jy)<4 THEN ENDPROC 


240 jx = 1280 - ADVAL(1) DIV 52 
250 jy = ADVAL(2) DIV 64 


260 ENDPROC 


Program 2.20a A joystick controlled rubber banding and painting program. 
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super-pixel of four pixels 


‘super-pixel’. This is illustrated in Figure 2.22. By plotting a selection 
of different colours in a super-pixel and repeating this pattern of 
colours in the other super-pixels over the region being coloured, we 
can create the effect of many different shades. 

We can not use colour 0 in our colour mixtures as the colour-fill 
algorithm would recognise this as a background point. However, 


270 DEF PROCprocesscommand 
280 IF CADVAL(O)AND 3)>0 THEN 

PROCdrawordelete : PROCfix : PROCdrawordelete : 
290 command$=INKEYS(0) 
300 IF command$="" THEN ENDPROC 
310 IF INSTR(comms$,command$) = 0 THEN ENDPROC 
320 PROCdrawordelete 
330 IF command$="W"' THEN 

GCOL 0,3 : PROCfillfrom(x,y) : GCOL 3,1 
340 IF command$=""R" THEN 

GCOL 0,1 : PROCfillfrom(x,y) : GCOL 3,1 
350 IF command$="Y" THEN 

GCOL 0,2 : PROCfillfrom(x,y) : GCOL 3,1 
360 IF command$ = "0" THEN Lineon = NOT Lineon 
370 IF command$ = "C" THEN cross = NOT cross 
380 PROCdrawordelete 
390 ENDPROC 


400 DEF PROCdrawordelete 

410  PROCcheckcross 

420 IF Lineon THEN MOVE xs, ys : DRAW x,y 
430 ENDPROC 


440 DEF PROCTix 

450 GCOL 0,1 : IF lineon THEN MOVE xs,ys : DRAW x,y 
460 GCOL 3,1 

470 xs=x:ys=y 

480 ENDPROC 


Figure 2.22 
‘Super-pixels’ 


ENDPROC 


continued 
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490 DEF PROCcheckcross 
500 IF cross THEN 


MOVE x-20,y : DRAW x+20,y : MOVE x,y-20 : DRAW x,y+20 
510 ENDPROC 


520 DEF PROCTiLLfrom(x,y) 

530 LOCAL Leftx,rightx,nextx,backx 
540 IF POINT(x,y)>0 THEN ENDPROC 
550 ~=first=1 : Last=0 

560 PROCfillalong(x,y) 

570 PROCqueue(leftx,rightx,y) 


580 REPEAT 

590 PROCunqueue 

600 PROCcheckalong(y+tystep) 
610 PROCcheckalong(y-ystep) 


620 UNTIL first=(last+1) MOD qsize 
630 ENDPROC 


640 DEF PROCcheckalong(y) 

650 LOCAL nextx 

660 IF POINTCfromx,y)=0 THEN nextx=fromx 
ELSE PROCfindback(fromx,y) : nextx=backx 

670 IF nextx>tox THEN ENDPROC 

680 REPEAT 

690 PROCfillalong(nextx,y) 

700 PROCqueue(Leftx,rightx,y) 

710 PROCf indback(nextx,y) 

720 nextx=backx 

730 UNTIL nextx>tox 

740 ENDPROC 


750 DEF PROCfillalong(x,y) 
760 PLOT 76,x,y 


Program 2.20a continued 


34 *FX 4,1 

35 leftS=CHR$136 
36 up$ =CHR$139 
37 *FX 11,10 

38 *FX 12,1 

40 comms$=Left$+right$tup$+down$+"OCWYRF" 


80 x = 640 : y = 512 
120 REM *** delete this Line. 


145 *FX 4,0 
146 *FX 12,0 


280 REM *** delete this Line. 


right$=CHR$137 
down$S =CHR$138 


Program 2.20b Recipe for converting Program 2.20a to keyboard control. 
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770 = X%=CPblock : Y%=CPblock DIV 256 

780 AZ=&80D : CALL &FFF1 

790 = Leftx=!CPblock MOD 65536 

800 = rightx=!(CPblock+4) MOD 65536 

810 PROCcolour(Lleftx-xstep,rightx+xstep,y) 
820 ENDPROC 


830 DEF PROCfindback(x,y) 
840 LOCAL Lastx 
850 PLOT 92,x,y 
860 X%=CPblock : Y%=CPblock DIV 256 
870 A%=8&0D : CALL &FFF1 
880 = Lastx=!(CPblLock+4) MOD 65536 
890 backx=Lastx+xstep 
900 IF lLastx>tox THEN 
PROCcoLlour (x-xstep,tox+xstep,y) 

ELSE PROCcolour(x-xstep, lastx,y) 

910 ENDPROC 


920 DEF PROCqueue(fx,tx,y) 

930 lLast=(last+1)MOD qsize 

940 = fromxq(last)=fx : toxq(last)=tx 
950 = yq(last)=y 

960 ENDPROC 


970 DEF PROCunqueue 

980 ~=fromx=fromxq(first) : tox=toxq(first) 
990 y=yq(first) 

1000 ~=s first=(first+1)MOD qsize 

1010 ENDPROC 


1020 DEF PROCcolour(x1,x2,y) 
1030 MOVE x1,y : DRAW x2,y 
1040 ENDPROC 


305 PROCcountcoms 


325 IF command$=lLeft$ THEN x=x-coms*xstep 
ELSE IF command$=right$ THEN x=x+coms*xstep 
ELSE IF command$=up$ THEN y=y+coms*ystep 
ELSE IF command$=down$ THEN y=y-coms*ystep 
326 IF commandS="F" THEN PROCfix 


393 DEF PROCcountcoms 

394  coms=0 

395 REPEAT : coms=comst+1 : nextcom$=INKEY$S(11) 
396 UNTIL nextcom$<>command$ 

397 ENDPROC 
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Figure 2.23 

Different ways of filling a 
super-pixel with colours 1 
and 2 


colours 1, 2 and 3 can be mixed in any combination we like within a 
pixel. There are 81 such patterns (3X3X3X3) for one super-pixel, 
but many of these patterns are equivalent when spread over a 
region. 

Let us look at the different ways of combining colours 1 and 2 
within a super-pixel. If these colours have their default settings for 
MODE 1, mixing them will give various shades of orange. 

Figure 2.23 shows the sixteen theoretically different ways of com- 
bining colours 1 and 2 ina super-pixel. ‘Mixture’ ais, of course, pure 
red and ‘mixture’ p is pure yellow. 

Now look at mixtures b, c, e and i. Each of these contain three red 
pixels and one yellow. If one of these mixtures is repeated over a 
large region, the overall result will be the same - mainly red with an 
occasional spot of yellow. On a high quality monitor, you may see 
the individual spots of yellow, but on most televisions, the pixels 
will merge together to produce a reddish-orange effect. Whether the 
colours mix into a flat shade with individual pixels invisible depends 
not only on the monitor resolution but also on the contrast between 
the pairs of colours that are mixed. 

Mixtures d, f, 2, j, k and m all contain equal proportions of red and 
yellow and these will all create an orange effect. Whether or not the 
horizontal, vertical or diagonal stripes of the underlying colours can 
be seen will again depend on the type of television or monitor being 
used. 

Finally, mixtures h, |, n and o each contain three yellow pixels and 
one red one. Thus, out of the 16 different mixing patterns in Figure 
2.23, there are really only 3 different shades apart from the two basic 
colours being used. In addition, the shades that contain equal 
quantities of the two basic colours can be categorised into horizon- 
tally, vertically and diagonally banded mixtures which will result in 
differences in texture of the resulting shade. We shall say more 
about such variations in texture shortly. 

If we now allow colours 1, 2 or 3 to be mixed within a pixel, then, 
out of the 81 different ways of combining three different colours, 
there are 15 different proportions in which the colours can be used. 
The ways in which we shall obtain these proportions in Program 
2.21 are illustrated in Figure 2.24. Thus, in addition to the 
background colour, we shall provide fifteen different foreground 
shades that can be used in what is basically a four-colour mode. 


a b c d e f g A 
1 2 1 2 
2 1 2 2 
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With the default colour settings in MODE 1, these shades will be 
combinations of red, yellow and white giving shades of orange, 
pink, primrose and cream. Of course, the basic palette can be 
changed by using VDU 19 statements to set colours 1 to 3 to any 
three of the eight actual colours available. This extends the range to 
several hundred possible shades, although only 15 can appear on 


21 DIM col(15,1,1) 

22 FOR mix=1 TO 15 

23 FOR cy=1 TO O STEP -1:FOR cx=0 TO 1 

24 READ col(mix,cx,cy) 

25 NEXT: NEXT:NEXT 

26 DATA 1,1,1,1, 2,2,2,2, 3,3,3,3, 1,1,1,2, 1,2,2,1, 1,2,2,2 
1,1,1,3, 1,3,3,1, 1,3,3,3, 2,2,2,3, 2737372, 2,373057 
1,2,3,1, 2,1,3,2, 3,1,2,3 

40 comms$ = "OCP" 


270 DEF PROCprocesscommand 
280 IF CADVAL(O) AND 3)>0 THEN 

PROCdrawordelete : PROCfix : PROCdrawordelete : ENDPROC 
290 command$=INKEY$(0) 
300 IF command$=""" THEN ENDPROC 
310 IF INSTR(comms$,command$) = 0 THEN ENDPROC 
320 PROCdrawordelete 
330 IF command$="'P"" THEN PROCpaint 
340 REM *** DELETED 
350 REM *x* DELETED 
360 IF command$ = "0" THEN Lineon = NOT Lineon 
370 IF commandS = "C" THEN cross = NOT cross 
380 PROCdrawordelete 
390 ENDPROC 


7 


512 DEF PROCpaint 

513 INPUT TABC(O,0),"colour mix(1..15)",mix 
514 PROCfillfrom(x,y):GCOL 3,1 

515 PRINT TABCO,0);SPC(25) 

516 ENDPROC 


1020 DEF PROCcolour(x1,x2,y) 

1030 LOCAL cx,cy, c1,c2 

1040 cy=y DIV ystep MOD 2 : cx=x1 DIV xstep MOD 2 
1050 = cl=col(mix,cx,cy) : c2=col(mix,1-cx,cy) 

1060 GCOL 0,c1 : MOVE x1,y : PLOT 21,x2,y 

1070 IF x1=x2 THEN ENDPROC 

1080 GCOL 0,c2 : MOVE x1+xstep,y : PLOT 21,x2,y 
1090 ENDPROC 


Program 2.21 Extensions needed to include colour mixing in Program 2.20. 
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Figure 2.24 
Super pixel mixtures used in 
colour mixing program 


the screen at once. 

In MODE 2, there are eight basic colours available which makes 
many more mixes possible. Although the pixels are bigger than in 
MODE 1, the results of mixing can be quite effective. 

Some mixing possibilities are illustrated in Colour Plates 4 and 5. 


2.10 FAST APPLICATION OF COLOUR MIXTURES 


Now we come to the problem of laying down one of these colour 
mixtures in a region surrounded by a boundary. For a given mix- 
ture, the colour fora single pixel will depend on that pixel’s horizon- 
tal and vertical position. The colouring algorithm in Program 2.20 
worked by colouring horizontal rows of pixels and so we shall 
concentrate on how to apply the appropriate sequence of colours to 
such a row. 

Only two colours out of the mixture being used will be needed on 
any one horizontal row (see Figure 2.25). On a given row, the two 
colours are applied to alternate pixels. To colour a horizontal row of 
pixels, we first need to decide which two colours are to be applied on 
that row and we then need to apply these to alternate pixels. (For 
some mixing patterns, the two colours may be the same.) The 
obvious way of filling alternate pixels on a row is to visit each pixel 
individually and use PLOT 69 with the appropriate colour. How- 
ever, this is unacceptably slow and there is a much better method. 

If the dotted line plotting command (PLOT 21) is applied between 
two points with the same y-coordinates, this results in alternate 
pixels being filled with the current foreground colour. Thus, to fill 
pixels alternately with two colours, we can plot a dotted line in one 
of the colours starting at the extreme left of the row and then plot 
another dotted line in the other colour starting one pixel in from the 
left! This trick enables us to colour-fill a region with one of our 
mixing patterns extremely rapidly considering the algorithm is im- 
plemented as a BASIC program. (For commercial use, the algorithm 
could be easily implemented in machine code.) 


1 2 3 4 5 6 
2 2 3 3 1 2 1°22 
2 2 3.3 2 1 2 2 
7 8 9 10 11 12 
1 $1 1 3 2 3 2 3 
1 3 3.3 3 2 3 3 
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super pixel colour 


Colours C1 and C2 alternate on this row 


Colours C3 and C4 alternate on this row 


The only remaining problems are how to select the two colours to 
be used on a given horizontal line and how to select the colour to be 
used first. 

We shall store the various mixing patterns (Figure 2.24) in a three- 
dimensional array ‘col’ whose first subscript selects one of 15 dif- 
ferent mixing patterns. Each of the other two subscripts is in the 
range 0 to 1. We can picture the array ‘col’ as a collection of 15 two- 
dimensional arrays, each of which represents a super-pixel colour 
combination. Each super-pixel has the structure illustrated in Figure 
2.26. 

Program 2.21, a modified version of Program 2.20, permits 
regions to be coloured in any one of the 15 different colour mixtures. 
Instead of typing one of the codes R, Y or W, the user now types P 
(for Paint) and is then asked which colour-mix he wants to use 
(1..15). 

The basic structure of the colouring algorithm is the same as 
before. The array ‘col’ has to be initialised to store the 15 different 
colour-mixing patterns and the only other change that needs to be 
made is in the definition of PROCcolour. The calculations at line 
1040 are used to calculate the two subscripts for ‘col’ needed to 
extract the first colour for the current row. We only need to extract 
colours for the first two pixels on the row (line 1050) and the whole 
row is filled by drawing dotted lines starting at these two pixels 
(lines 1060 and 1080). 


Texture patterns 
As we saw earlier, different ways of applying two colours in the 
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Figure 2.25 
Applying colours to alternate 
rows 


Figure 2.26 

Structure of each possible 
colour mix as represented in 
the array ‘col’ 
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Figure 2.27 
Regular textures used in 
weaving 


simple weave 


basket weave 


same proportions can result in variations of texture. This may be 
undesirable in colour mixing but the effect can be positively ex- 
ploited in computer art. You can experiment with global variations 
of texture, cross-hatching for instance, in Program 2.22 by trying 
different DATA statements at line 26. Compare the three mixing 
patterns: 


1,1,2,2 1,2,1,2 1,2,2,1 


If we forego the advantages of rapid filling with the dotted line 
technique and carry out calculations similar to those at line 1040 for 
each pixel to be filled, there are many interesting textures with 
which we could experiment. Some of the textures used in weaving 
are illustrated in Figure 2.27. We leave the implementation of these 
as a project for the reader. 


2.11 HARDWARE EXTENSIONS TO THE COLOUR PALETTE 


The disadvantage of colour mixing by mixing pixels spatially is 
obvious. The pixels are large enough to be clearly visible and certain 
colour combinations do not really ‘mix’ but produce a visible tex- 
ture. Super-pixelling is a technique whose efficacy increases with 
increasing resolution. 

Genuine palette extension is easily achieved by simple add-on 
hardware. Figure 2.28 shows such a scheme. The details are worthy 
of description because the devices are relatively inexpensive (cur- 
rently one quarter to one half the price of a processor). We can still 
have only eight basic colours on the screen at any time, but now the 
eight colours can be chosen out of a selection of 512. This design can 
easily be extended to 4096 colours or an even higher number. 

The device consists of a black box with one set of inputs taken 
from the RGB output from the micro. The other input to the device 
comprises 24 3-bit numbers loaded under program control. These 
are 24 3-bit colour values, eight of which are loaded into each 8x3 
register. The RGB output from the micro is then used as a 3-bit 
address code and accesses corresponding locations in each register. 
The RGB code causes three 3-bit colour data values to be sent to 
three digital to analogue converters which drive the RGB out lines. 
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An actual example may make things clear. If we wanted the eight 
screen colours to be the eight shades of red, we would load the 
registers as shown in Figure 2.29. An RGB code of 101 (5) from the 
computer would select the code 101 (5) for red, 000 (0) for green and 
000 (0) for blue causing the colour on the screen to be the fifth shade 
of red. 

Colour Plates 6 to 12 show the device in use. Colour Plate6 shows 
a solid figure plotted using different hues of red, and Colour Plate7 
shows a more complicated figure using hues of red, green and blue. 
Colour Plate 8 is the same scene filled using the standard colours 
available. The striking difference between these two illustrations 
demonstrates the effectiveness of the technique. The illustration 
shown in Colour Plate 9 is built up of the word, or logo, SYSTEM 
plotted from a start position that is slightly shifted in the x and y 
direction each time it is plotted. Different intensities of yellow are 
used each time and the result gives a perspective impression that is 
often used in television. Colour Plates 10, 11 and 12 show the output 
from a program that allows individual alteration of the RGB 
weights. These weights are shown for each colour in the accom- 
panying table. The three illustrations show first of all the pure 
colours obtained by using combinations of 0 and 7. These are the 
standard saturated colours for the machine. In other words the 
device is emulating an ordinary machine. The next illustration 
demonstrates the effect of saturating these colours (i.e. adding 
white light). This effect is obtained by using combinations of 7 and 3. 
Finally Colour Plate 12 shows ‘mixed’ or ‘new’ colours not available 
on a standard machine. Again bear in mind that we can only have 
eight colours on the screen at any one time. 


Figure 2.28 
512 palette colour synthesiser 
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Figure 2.29 
Register values set up for 
eight shades of red 


RGBin 


Re ee 
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RGBin 3 bit Red out 3 bit Green out 3 bit Blue out 
000 000 000 000 
001 001 000 000 
010 010 000 000 
011 011 000 000 
100 100 000 000 
101 101 000 000 
110 110 000 000 
111 11171 000 000 


In summary the device is just an extra level of look up table that is 
superimposed on the existing video look up table whose contents 
can be changed by the VDU 19 instruction. 


2.12 GRAPHICS INPUT DEVICES 


Throughout this chapter, the keyboard has been the main device 
used to interact with our programs. There are many input devices 
that are more convenient for interactive graphics programming. 
Such devices can be categorised according to their function in a 
system. First of all we need to be able to point to a particular position 
on the screen, for example to select a particular entity from a menu. 
We thus need a pointing device. Secondly we need to input (x,y) 
coordinates to an interactive system, for example, to define or draw 
new shapes or to identify a position at which a predefined shape is 
to be drawn. Thirdly we need a state selection device to inform an 
interactive system what state the system is to be in: accepting a 
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menu selection, accepting a stream of coordinates from a digitizer 
and whether the coordinates are pen-up or pen-down etc. Most 
devices will service more than one of these functions. For example, a 
light pen although predominantly a pointing device can also func- 
tion as a positioning device (but less conveniently — see below). A 
graphics tablet is predominantly a positioning device and is only 
slightly less convenient to use as a pointing device than a light pen. 
A keyboard is predominantly a state selection device but it can be 
used as a pointing and a positioning device. However it is a very 
inconvenient way of providing these functions. 


Graphics tablets 

A graphics tablet is one of the most convenient input devices. It 
consists of a flat surface, separate from the display, over which some 
kind of stylus is moved (Figure 2.30). It is the most versatile input 
device and can be used as both a position device and a pointing 
device. If a puck (see below) is used instead of a stylus, then it can 
perform all three functions: pointing, positioning and state selec- 
tion. Although many times more expensive than a light pen it is 
frequently used in professional computer graphics because of this 
versatility. 

Using a graphics tablet for positioning is much more natural than 
using a joystick or a light pen because it is equivalent to drawing 
with a pen on paper. Such devices are of course more expensive 
than joysticks or light pens. However, there is a whole range of 
graphics tablet technologies and the cheaper devices are currently 
about one quarter to one half of the price of a processor. Generally 
the more expensive a device is the more accurate it is. 


Stylus 


Zz 


Figure 2.30 
Graphics tablet 
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Figure 2.31 

A puck combines the function 
of a positioning device and a 
state selection device 


Figure 2.32 

An inexpensive graphics 
tablet design uses two 
potentiometers 


Lens and crosswire 


Selection buttons 


Information sent from the device consists of the current (x,y) 
coordinate of the stylus, or a stream of (x,y) coordinates as the stylus 
is moved. This stream can be controlled in one of three ways. Firstly 
an (x,y) coordinate can be sent to the processor on request. Secondly 
an (x,y) coordinate can be sent at equal time intervals, and, thirdly 
an (x,y) coordinate can be sent every time the stylus is moved more 
than some distance d. The time interval method is used when a user 
is drawing on the tablet and the drawing is to be displayed on the 
screen. The drawing action on the tablet is then mirrored on the 
screen. The distance interval method is appropriate when an exist- 
ing drawing is being digitized. When digitizing a line drawing such 
as, for example, a map it is impossible for the user to move the stylus 
over different parts of the drawing at uniform velocity, and distance 
sampling effectively edits an uneven data stream. Alternatively a 
pressure sensitive switch on the stylus can be used to signal that a 
point is to be sent. Another logical signal that has to be sent when 
digitizing is a pen-up pen-down state indication. When a point is 
sent to the processor the user must state whether this is a pen-up or 
pen-down point. This facility can be incorporated on the processor 
keyboard, or a flat cross wire cursor device with buttons on it can be 
used instead of a pen stylus. This device is called a puck (Figure 
2.31) 
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When using a tablet visual feedback is provided by either mirror- 
ing the stylus movement on the screen, if the system is in the pen 
down state, or by mirroring the stylus movement by using a cursor. 
This moves around as the stylus is moved in the pen-up state. 

The cheapest tablet technology and the least natural to use is a 
device made with a pair of potentiometers (Figure 2.32). One poten- 
tiometer A is fixed and the other is mounted on the axis that joins 
two radial arms. The stylus is mounted at the end of the lower radial 
arm and as it is moved over the surface, angles a, b and c and 
distance r vary. The angle c is proportional to the voltage from 
potentiometer A and the angle a can be calculated from angle b 
which is proportional to the voltage from potentiometer B. r can be 
computed from the geometry of the system and we can calculate x 
and y coordinates measured from point A as: 


x = rcos(a + c) 
y =rsin(a + c) 


This device can easily be built up at home. If purchased it will be 
considerably cheaper than any of the higher technology devices. It 
does however suffer from lack of accuracy and linearity. Because the 
stylus is rigidly fixed to the lower radial arm it is less natural and 
thus more difficult to use than a ‘free’ stylus. 

A more expensive device uses acoustic technology (Figure 2.33). 
Strip microphones are mounted along two sides of the tablet. The 
stylus emits audible sound pulses by generating a spark at regular 
intervals. The time delay from the initiation of the spark to the 
reception of the noise pulse by a strip microphone is proportional to 
the distance of the stylus from the microphone. The horizontal 
microphone thus measures the y coordinate and the vertical 
microphone measures the x coordinate. An advantage of this 


Strip microphone 


_— pulse 
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Sound pulse Strip microphone 


Figure 2.33 

Acoustic tablet uses strip 
microphones and a spark 
emitting stylus 
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Figure 2.34 

The most convenient tablets 
use a grid of fine wires 
embedded below (or 
technology that is equivalent) 


Figure 2.35 
A joystick is a common 
positioning device 


technology is that it can be extended to three dimensions and three- 
dimensional range information from a solid body can be input using 
three mutually perpendicular strip microphones. 

Yet another type of tablet, developed originally by the RAND 
corporation and known as the RAND tablet, uses a grid of fine wires 
embedded in the surface (Figure 2.34). Each wire carries a uniquely 
coded signal. The stylus picks up this code and decoding logic 
identifies which x and y line intersection the stylus is near. This is 
very accurate but expensive technology. Technology that uses a 
sensitive tablet is usually the most accurate and convenient and this 
device was the first sensitive tablet type. 

Possibly the most common device in use (apart from the poten- 
tiometer type) is one that uses sheet magnetostrictive material. This 
effectively acts as a matrix of embedded wires but is cheaper to 
manufacture. Pulses are sent through the material horizontally and 
then vertically and measurement of time delays provides the coordi- 
nate information. 
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Joysticks 

The most popular use of a joystick (Figure 2.35) in microprocessors 
is to control a computer game. In this context the device is function- 
ing as a positioner, moving a spaceship or whatever over the screen 
in response to manual movement of the joystick. They can also be 
used as pointing devices. Although extremely cheap and good 
positioning devices for computer games, they do not function well 
as positioning devices in general when a freehand shape is to be 
input. They are not as natural to use as a stylus or light pen for 
positioning because the drawing action is completely divorced from 
the act of drawing on a surface. The use of a joystick as a drawing 
device was demonstrated in Program 2.20. 


Light pens 

A light pen is predominantly a pointing device. Unlike the graphics 
tablet it has no hardware that outputs a stream of (x,y) coordinates. 
It can however function as a positioning device providing a tracking 
program is running. It is therefore a hardware pointing device and a 
software positioning device. A light pen is a very cheap and effec- 
tive pointing device. Its operation is illustrated in Figure 2.36. The 
light pen contains a photo-detector and is placed at a certain (non- 
blank) position on the screen. When the raster scan beam comes into 
coincidence with the light pen a pulse is generated and detected by 
the processor. The processor compares the time of this with the start 
of the raster scan and calculates the (x,y) coordinate of the stylus 
point. 


Figure 2.36 

Light pen: photo detector in 
the stylus emits a pulse when 
the electron beam passes 
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3 Mantpulations in the 
two-dimensional world 


In this chapter we will be looking at two-dimensional transforma- 
tions. The treatment is necessarily mathematical because 
mathematics gives us an ordered general framework for dealing 
with transformations. The mathematics used for linear transforma- 
tions involves matrix notation. Although not difficult the details 
have been isolated in Appendix 4. As with other mathematical 
techniques in the book these can be ignored if you are unhappy with 
them and the end result of the mathematics used as a recipe in the 
form of a procedure. The principles are easy to understand and you 
can become adept at two-dimensional manipulations using a recipe 
approach. 

Non-linear transformations, a topic usually ignored in standard 
computer graphics texts are introduced using two intriguing appli- 
cations: the species ‘transformations’ of D’arcy Thompson and 
anamorphic art. Study of this chapter will enable you to explore 
mathematically based computer art or pattern generation. Sub- 
sequent chapters take you deeper into this theme. 


3.1 TWO-DIMENSIONAL TRANSFORMATIONS AND MATRIX 
NOTATION 


The easiest two-dimensional transformation to implement and one 
that you have probably used already is translation or movement in 
one direction. Translation is one of a set of linear transformations 
that we can apply to a set of coordinates that specify the vertices or 
corners of a piecewise linear figure. 

In the more general case a set of points S is operated on by a 
transformation T to produce the set S’. This means that a 
mathematical operation is carried out on all the points in S, chang- 
ing their coordinate values to produce points in S’. (Figure 3.1). 

Depending on the operation used this may change the shape of a 
figure that is defined by drawing straight lines between the points. 
In Figure 3.1 the rectangle defined by drawing lines between the 
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vertices is transformed into a parallelogram owing to the transfor- 
mation of these vertices. Consider a set of coordinate points repre- 
senting a piecewise linear bird. To draw the six seagulls shown in 
Figure 3.2a from a single set of (x,y) coordinates in DATA state- 
ments we could use Program 3.1. 

The program effects five simple transformations of the coordinate 
set in the DATA statements. To change the translation such that, for 
example, a vertically displaced set was displayed, we could change 
lines 100 and 120: 
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Figure 3.1 

Transforming vertices 
transforms the shape defined 
by the vertices 


Figure 3.2 
Effecting transformations with 
special programs 
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MODE 0 
VDU 29, 640; 512; 


100 READ x,y : MOVE x, yti 
120 READ x, y : DRAW x, yti 


This effect is shown in Figure 3.2b. Similarly a diagonally displaced 
bird could be drawn by incrementing both ‘x’ and ‘y’ (Figure 3.2c). 
This is, however, an approach that would lead us into a different 
programming notation for each transformation that we used which 
would be a rather unsatisfactory state of affairs. 

What we will now proceed to develop is a mathematical technique 
that allows us to specify any transformation as a set of four parame- 
ters. We can then have a single procedure that operates on the data 
set, using these parameters and producing the desired transforma- 
tion. (We will then find that this system has certain deficiencies that 
can be overcome by using six parameters.) 

To start with we will ignore translation and consider the other two 
common transformations, rotation and scaling. To rotate a point 
(x,y) through a clockwise angle, theta, about the origin, the transfor- 
mation is: 


xt =xcos@+ysin8 
yt = -x sin 8 + y cos 8 


and scaling is given by: 
xt = x S1 
yt = y S2 


The xt and yt are the transformed values of x and y. S1 is the scaling 
factor in the x direction and S2 the scaling factor in the y direction. 


FOR i = 0 TO 100 STEP 20 
PROCdrawseagull(i) 


NEXT i 
END 


DEF PROCdrawseagull(i) 


RESTORE 
READ noofpoints 


READ x, y : MOVE xti, y 
FOR j = 2 TO noofpoints 
READ x, y : DRAW xti, y 


NEXT j 
ENDPROC 


DATA 17, -110,70 


DATA -120,90, -110,100, -90,100, -30,70 
DATA 100,240, 300,160, 130,180, 40,0 
DATA 140,-60, 60,-130, 0,-40, -140,-130 
DATA -220,-390, -200,-70, -70,30, -110,70 


Program 3.1 Repeatedly draws a bird shape with increasing horizontal displacement. 


For example, to magnify a figure uniformly we would use 
S1 = $2 = 3, say. Now we can make the two sets of equations look 
like each other by re-expressing the scaling equations as: 


xt=xS1+y0 
yt=x0+yS2 


Adding the product of y and 0 and x and 0 has no effect except that 
the pair of equations for rotation and the pair for scaling are now in 
the same form. This enables us to write the operations using matrix 
notation. (Details on matrix notation and matrix manipulation are to 
be found in Appendixes 4 and 5). Firstly rotation clockwise: 


(xt, yt) = (x,y) Be 6 -sin 4 


sin® cos8 


and scaling: 


(xt,yt) = (x,y) | S10 
0 S2 


and this is just a different way of writing the operations expressed as 
equations above. The notation used for expressing such transforma- 
tions in matrix form is not standard but is, for better or worse, the 
de-facto standard in computer graphics. We can now represent 
various linear transformations as 2X2 matrices: 


1, Identity (no effect) 1 0 
01 

2. Rotation (clockwise) cos @ -sin 8 
sin @ cos 8 


3. Rotation (counter-clockwise)| cos 0 sin @ 
-sin ®@ cos @ 


4. Scaling E | 


5. Reflection (about the x-axis) : "| 
0 -il 
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6. Reflection (about the yaxis E | 
01 


7. Y Shear 1 $ 
0 1 
8. X Shear 10 
S 1 


Note that we cannot define translation using this system, a point we 
shall return to in a moment. 


10 MODE O 

20 VDU 29, 640; 512; 

30 PROCdrawaxes 

35 PRINT "Transformation matrix" 

40 PRINT "a c"'''b d"; TAB(6,3); "2" 

50 INPUT TAB(9,2)a, TAB(14,2)c, TABC9,4)b, TAB(14,4)d 
55 INPUT '"Rectangle or Bird(R/B)", reply$ 
56 IF reply$="B" THEN RESTORE 1000 

60 READ noofpoints 

70 READ x, y : PROCtransform(x,y) 

80 MOVE xt, yt 

90 FOR i = 2 TO noofpoints 

100 READ x, y 

110 PROCtransform(x, y) 

120 DRAW xt, yt 
130 NEXT i 
140 k=GET : MODE 7 : END 


200 DEF PROCdrawaxes 

210 MOVE -640,0 : DRAW 640,0 
220 MOVE 0,-512 : DRAW 0,512 
230 ENDPROC 


300 DEF PROCtransform(x, y) 
310 xt = akx + bry 

320 yt = cxx + dy 

330 ENDPROC 


500 DATA 5, 0,0, 180,0, 180,300, 0,300, 0,0 
1000 DATA 17, -110,70 

1010 DATA -120,90, -110,100, -90,100, -30,70 
1020 DATA 100,240, 300,160, 130,180, 40,0 

1030 DATA 140,-60, 60,-130, 0,-40, -140,-130 
1040 DATA -220,-390, -200,-70, -70,30, -110,70 


Program 3.2 Demonstrates the use of a2X2 transformation matrix on the bird shape or on a simpler 
rectangle shape. 


Program 3.2 is a program that will accept the four parameters 
defining a transformation, using the terminology: 


aoe 
bd 
for the transformation matrix. 

Note that we have just one procedure and two lines of calculation 
to perform any of the above transformations. The illustrations in 
Figure 3.3 show the effect of the transformations on a piecewise 
linear image made up of the large characters IMAGE. 

Now bear in mind that this is only a demonstration program and 
that normally we would not calculate cosines and sines before 
supplying these as program input. Rather cos 8 and sin 8 would be 
calculated in the course of execution of a program. 


Homogeneous coordinates 

The above system for effecting two-dimensional transformations 
has a number of drawbacks. Firstly it excludes an important 
transformation (translation). Secondly all the transformations are 
centred at the origin, (0,0). This is fine in the above examples where 
the bottom left hand corner of IMAGE is at the origin. Consider a 
rectangle not centred at the origin and subject to a 30° rotation 
(Figure 3.4). Because the rotation is centred on the origin the rec- 
tangle both rotates and translates. When we are rotating a geometri- 
cal figure it is far more likely that we require rotation about an 
arbitrary point, for example, any one of the vertices of the rectangle, 
or the intersection of its diagonals. Such a transformation is not 
available in the above system. Similarly reflections are through the 
x-axis or the y-axis. Reflections through other lines are not available. 

Perhaps most absurd of all is scaling. This also involves a transla- 
tion. Figure 3.5 shows the rectangle offset from the origin and 
subject to a shrinking. Again it is highly unlikely that we should 
ever require scaling complicated by a translation proportional to the 
magnitude of the scaling. Rather we may require ‘pure’ scaling 
about a centre point or vertex. 

A homogenous coordinate system is a notation that overcomes 
these difficulties. In a homogeneous coordinate system a point (x,y) 
becomes (x/r, y/r, r). It is convenient to make r = 1, avoiding divi- 
sion, giving the representation of a point as (x, y, 1). Because a point 
is now a three element row matrix, transformation matrices are now 
3X3. This system has the immediate advantage that we can now 
represent the translation transformation with a 3X3 matrix. We can 
now write down six common transformation matrices: 


1. Translation] 1 0 
1 
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Figure 3.3 
Using a general 
transformation procedure 


(a) identity} 1 0 
0 1 


(b) scaling 10.5 0 
0 2 


(c) scaling }1.5 0 
0 15 


(d) reflection|-1 0 
inxandy| 0 -1l 


inxaxis |0 -1 


(e) reflection : | 


(f) reflection Ee | 


inyaxis | 0 1 


(g) x shear|]1 0 
11 


(h) yshear}|1 1 
0 1 


(i) clockwise | 0.866 -0.5 
rotation | 0.5 0.866 
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Figure 3.4 
A rectangle rotated is also 
displaced 


where Tx is the translation in the x direction and Ty is the translation 
in the y direction. To check that this works let us translate the point 
(1, 1, 1)) through a distance of 2 in the x direction: 


1 0 0] =((1x1 + 0x1 + 1x2), 
Oo A O (1x0 + 1x1 + 1x0), 
2 @ 1 (1x0 + 1x0 + 1xX1)) 


In other words 


(x,y, 1] 1 0 O| = (e+ Tx, y + Ty, 1) 
01 0 
Tx Ty 1 


Some of the other transformations in our new system are: 


Figure 3.5 
A rectangle scaled is also 
displaced 


2. Rotation cos 8 -sin@ 0 
(clockwise) sin®@ cos6d 0 

0 0 1 

3. Rotation cos@ siné 0 
(anti-clockwise) | ~sin 8 cos@ 0 

0 0 1 


These rotations are still centred on the origin. 


4. Scaling Sx 0 0 


5. Reflection | 1 0 0 


(x-axis) 0 -1 0 

0 01 

6. X Shear 1 0 0 
S§ 1 0 

0 oO 1 


To test that these are exactly the same as we had before we can alter 
the demonstration program to input six parameters and perform the 
matrix multiplication. The required alterations are captioned Pro- 
gram 3.3. The input parameters represent six of the coefficients of a 
3X3 transformation matrix: 

ad0 

be OQ 

c f 1 
So what have we achieved? Very little as yet! Certainly we have 
represented translation in a matrix system, but we now need nine 
matrix coefficients instead of four to achieve the same result. (Ac- 
tually we have only used six of the nine above, but you will see 
shortly that nine are convenient when combinations of transforma- 
tions are considered.) However, the fact that we have included 
translation in our system now gives us a major advantage: we need 
no longer restrict ourselves to transformations at the origin. Thus 
homogeneous coordinates provide a rather roundabout way of 
adding constants to the transformed x and y values. The advantage 
of this notation is that transformations can still be represented as 
matrices which will be useful when considering combinations of 
transformations. 
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Generalised two-dimensional transformations 

Consider the problem of rotation about any point. Say, for example, 
we wish to rotate a rectangle, in any position, 30° counter-clockwise 
about its bottom left hand vertex. We can easily do this now in the 
four steps shown in Figure 3.6. 


The three operations would be: 


T1 = translate = | 1 0 0] (move rectangle to 
0 1 0] the origin) 
-Tx -Ty 1 
R = rotate = cos(30°) sin(30°) 0] (rotate rectangle about 
-sin(30°) cos(30°) 0] the origin) 
0 0 1 
T2 = translate= | 1 0 0] (move rotated rectangle 


0 1 0] back to original 
Tx Ty 1] position) 


Now instead of multiplying each point (x,y,1) by three matrices we 
can multiply the matrices together to obtain a ‘net transformation 
matrix’ (details on matrix multiplication plus a procedure to per- 
form the multiplication are contained in Appendix 4). 


net transformation matrix = T1XRxXT2 


and then multiply each point (x,y,1) by this matrix. A net transfor- 
mation matrix is always of the form: 


Oo UCL 


Original rectangle at P(Tx, Ty) Translate to the origin 


Figure 3.6 ? j 30° 


Formation of a net transform 
for rotation about point P Rotate about the origin Translate to P(Tx, Ty) 
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and in this case 


TIXRXT2 = cos(30°) sin(30°) 0 
—sin(30°) cos(30°) 0 
Tx(1-cos(30°))+Ty sin(30°) Ty(1-cos(30°))}-Tx sin(30°) 1 


This is the single matrix required to effect the transformation shown 
in Figure 3.6. The same approach can be used for scaling. 

Say we wanted to shrink the rectangle about its centre point. 
(Figure 3.7). The rectangle has shrunk within itself which is the 
desired transformation. This should be compared with the 2x2 
system shrinking illustration (Figure 3.5) where the effect of apply- 
ing a shrink transformation was also to translate the rectangle 
‘outside itself’. 

The net transform matrix for scaling is: 


S1 0 oO 
0 S20 
Tx(1-S1) Ty(1-S2) 1 


A similar approach can be adopted for the other transformations. 
Any arbitrary combination of translation scaling and rotation will 
result in a single transformation matrix and this is the advantage of 
the approach: we only need one matrix for any transformation. For 
example we could combine the transformations in Figure 3.8 into a 
net transformation matrix. 

In general, transformations are not commutative, i.e. the order in 
which the individual matrices are multiplied to form a net transfor- 
mation matrix is important. T1 x RXT2 is not the same as T1XT2xXR. 

Because net transformation matrices are always of the form: 


Original rectangle at P( Tx, Ty) 


Translate to origin 


Shrink Translate to P( Tx, Ty) 
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Figure 3.7 
Formation of a net transform 
for shrinking about point P 
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a rT 8 


d 0 
e 0 
fl 
The multiplication 


(xt, yt l)=(x%y, 1) fa d 0 
beO 
cf 1 


reduces to 


(xt, yt) = (x,y, 1) |a d 
be 


c f 


and this is implemented in Program 3.3, which is Program 3.2 
altered to include homogenous transformations. Thus what we 
have achieved with our 3X3 system is a method for producing a net 
transformation matrix froma series of 3X3 transformation matrices. 
The process is sometimes called concatenating (joining together) 


FL 


Original Translation 
Scaling Rotation 


Figure 3.8 


Formation of a net transform 


for scaling and rotation Translation 


40 PRINT "a d"''"b e'''"c £";TAB(6,4); "2" 
50 INPUT TAB(9,2)a, TAB(14,2)d, TAB(9,4)b, TAB(14,4)e, 
TAB(9,6)c, TAB(14,6)f 


300 DEF PROCtransform(x, y) 
310 xt = akx + bey +c 
320 yt = dxx + ery + f 
330 ENDPROC 
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Program 3.3 Alterations to Program 3.2 to use a 2X3 transformation matrix (homogeneous coordinates). 


This permits the inclusion of translations in a transformation. 


transformations. We need the 3X3 system to perform the con- 
catenation. Concatenation is clearly advantageous because we need 
only multiply the matrices together once to obtain the net transfor- 
mation matrix and then multiply each point in the data set by this 
matrix. As we have seen this final multiplication reduces to just four 
products and four additions. Such efficiency considerations are 
critically important in real time animation computers such as flight 
simulators. 


Repeating transformations 

Many elaborate designs can be constructed by redrawing a figure in 
a loop and subjecting it each time to an increasing scaling, rotation, 
translation or any combination of these. Above we introduced the 
idea using piecewise linear seagulls together with translation only. 
In this section we will look at combinations of scaling, rotation and 
translation operating on the IMAGE characters. 

Also in this section we introduce a common technique for dealing 
with overlapping patterns like the IMAGE characters. In this con- 
text we are going to build up a composite pattern that consists of 
overlapping IMAGE patterns. The first pattern drawn is to be par- 
tially obscured by the second pattern and the second pattern par- 
tially obscured by the third and so on. In other words we need to 
end up with the situation depicted in Figure 3.9. This can easily be 


Second I 
drawn 


First I 
drawn 


Figure 3.9 
Obscuring scheme used for 
IMAGE designs 
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Figure 3.10 
Two stages in obscuring 
scheme 


Figure 3.11 
Repeated transformations 


(a) Ty = Ty + 60 


Sx = Sx + 0.25 
Sy = Sy + 0.35 
(b) Ty = Ty + 60 
Sx = Sx + 0.35 
Sy = Sy + 0.15 


J 


Before 2nd 2nd character 
character is plotted in 
pas eae 2nd character 
triangular fil! plotted in 
foreground 
colour 


achieved by firstly plotting each character in the background colour 
using triangular fill. The effect of this is normally invisible except 
where it obscures lines already on the screen. After the interior of 
the character is painted in background colour the outline can then be 
plotted. This scheme is depicted in Figure 3.10. Designs using this 
scheme are shown in Figures 3.11, 3.12 and 3.13. The final IMAGE 
pattern is filled in the foreground colour for effect, otherwise each 
character is filled first in background colour and then outlined in 
foreground colour. 

Figure 3.11 was produced by Program 3.4. The only complication 
in this program is the two sets of DATA statements. The first set is 
the data for the character outline comprising a control code followed 
by a pair of relative coordinates. (Relative coordinates are easier to 
design than absolute coordinates in this context.) The second set of 
DATA statements contains coordinate triples that are suitable for 
triangular fill. These are different from the first set. The first set lists 
the coordinates for plotting as they would be encountered if the 


outline was drawn by a pen. This convenient ordering required for 
drawing the outline on the screen is not the ordering required for 
triangular fill. Program 3.4 thus contains two calls to PROCdraw 
using a parameter that controls which data set is selected. The 
transformations incorporated in the programs are those for the first 
image in Figure 3.11. In each case the transformations and loop 
alterations are shown alongside each photograph. Figure 3.12 
shows two more ideas. Rotation in 10° increments has been in- 
troduced and this is combined with a uniform scaling to produce the 
two designs. Figure 3.13 was produced by introducing a structural 
alteration to the program. In each design the scale factor is increased 
both between letters and IMAGEs. This means incrementing the 
scale factor within the ‘letter’ loop. The design incorporated in 
Program 3.4 and its alterations are only suggestions and the basic 


Two-dimensional manipulations 117 


Figure 3.12 
Repeated transformations 


(a) theta = theta + 10 
Sx = Sy =S5 + 0.2 


(b) theta = theta + 10 
Sx = Sy =S + 0.15 


Figure 3.13 

Repeated transformations 

(a) Sx = Sy =S+ 0.3 
within the ‘letter’ loop 

(b) Sx = Sy =S + 0.15 
within the ‘letter’ loop 
theta = theta + 10 
within the ‘IMAGE’ loop 
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idea can be exploited to produce imitations of most of the caption 
effects used by television caption designers. 


3.2 NON-LINEAR TRANSFORMATIONS 
The transformations that we have studied up to now have been 


50 FOR image = 1 TO 5 

60 PROCdraw( TRUE) 

70 PROCdraw( FALSE) 

80 f = f + 60: a= at 0.25: e = e + 0.35 
90 NEXT image 

100 k=GET:MODE 7:END 


110 DEF PROCdraw(fill) 

120) x = -120*2.5 

130 IF fill THEN GCOL 0,0: RESTORE 480 
ELSE GCOL 0,1: RESTORE 320 

140 IF image = 5 THEN GCOL 0, 1 

150 READ letters 

160 FOR i=1 TO letters 


170 PROCtransform(x,y) : MOVE xt,yt 
180 READ no 

190 FOR j=1 TO no 

200 READ p,xr,yr 

210 X=x+xr os y=ytyr 

220 PROCtransform(x,y) 

230 PLOT pt4, xt,yt 

240 NEXT j 

250 x =x + 120 

260 NEXT i 


270 ENDPROC 


280 DEF PROCtransform(x, y) 
290 xt = akx + bey +c 
300 yt = d*x + exy + f 
310 ENDPROC 


320 DATA 5 

330 REM "I" 

340 DATA 12 

350 DATA 1,0,16, 1,32,0, 1,0,96, 1,-32,0, 1,0,16, 1,80,0, 
1,0,-16, 1,-32,0, 1,0,-96, 1,32,0, 1,0,-16, 1,-80,0 

360 REM "M" 

370 DATA 10 

380 DATA 1,0,128, 1,40,-44, 1,40,44, 1,0,-128, 1,-16,0, 1,0,84, 
1,-24,-24, 1,-24,24, 1,0,-84, 1,-16,0 


Program 3.4 Combining transformations on a simple caption. 


Two-dimensional manipulations 


linear transformations. In simple terms this means that the coordi- 
nate pairs representing points or line end points are only ever 
multiplied by constants. For example when we magnify an image 
made up of a set of points joined together with straight lines we 
multiply the x and y value of each coordinate by the same constant. 


390 
400 
410 


420 
430 
440 


450 
460 
470 


475 
480 
490 
500 


510 
520 
530 


540 
550 
560 


570 
580 
590 


600 
610 


620 
630 


REM wan 

DATA 13 

DATA 1,32,128, 1,16,0, 1,32,-128, 1,-16,0, 1,-12,44, 1,-24,0, 
1,-12,-44, 1,-16,0, 0,32,60, 1,16,0, 1,-8,36, 1,-8,-36, 
0,-32,-60 

REM "gt 

DATA 24 

DATA 0,0,20, 1,0,88, 1,20,20, 1,40,0, 1,20,-20, 1,0,-16, 
1,-16,0, 1,0,12, 1,-12,8, 1,-24,0, 1,-12,-8, 1,0,-76, 
1,12,-12, 1,24,0, 1,12,8, 1,0,24, 1,-16,0, 1,0,16, 
1,32,0, 1,0,-48, 1,-20,-16, 1,-40,0, 1,-20,20, 0,0,-20 

REM wen 

DATA 12 

DATA 1,0,128, 1,80,0, 1,0,-16, 1,-64,0, 1,0,-40, 1,36,0, 
1,0,-16, 1,-36,0, 1,0,-40, 1,64,0, 1,0,-16, 1,-80,0 


REM "I" (Colour filled) 
DATA 5 
DATA 12 
DATA 1,0,16, 81,80,-16, 81,0,16, 1,-32,0, 1,0,96, 81,-16,-96, 
81,0,96, 1,-32,0, 1,0,16, 81,80,-16, 81,0,16, 0,-80,-128 
REM "M" (Colour filled) 
DATA 10 
DATA 1,16,0, 81,-16,128, 81,16,-44, 81,24,0, 81,0,-24, 
81,40,68, 81,-16,-44, 81,16,-84, 81,-16,0, 0,-64,0 
REM "A" (Colour filled) 
DATA 13 
DATA 1,32,128, 81,-16,-128, 81,32,128, 1,32,-128, 81,-16,0, 
1,-16,128, 81,-16,0, 0,0,-68, 1,-4,-16, 81,24,0, 
1,74,16, 81,-16,0, 0,-32,-60 
REM "G" (Colour filled) 
DATA 23 
DATA 0,64,92, 1,16,0, 81,-16,12, 81,16,4, 81,-28,4, 81,8,16, 
81,-32,-16, 81,-8,16, 81,-4,-24, 81,-16,4, 81,16,-80 
DATA 81,-16,-8, 81,28,-4, 81,-8,-16, 81,32,16, 81,8,-16, 
81,4,24, 81,16,-8, 81,-16,32, 81,16,16, 81,-32,-16, 
81,0,16, 0,-48,-64 
REM "E" (Colour filled) 
DATA 17 
DATA 1,80,0, 81,0,16, 1,-80,0, 81,0,-16, 1,0,128, 81,16,-128, 
81,0,128, 1,64,0, 81,0,-16, 1,-64,0, 81,0,16, 0,0,-56, 
1,36,0, 81,0,-16, 1,-36,0, 81,0,16, 0,-32,-72 
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Figure 3.14 (opposite) 

Shear transform applied to a 
D’arcy Thompson example: 
(a)(b) original sketches; (c) 
computer original; (d) S = 0.3; 
(e) S = 0.5; (f) S = 0.7 


In non-linear transformations x may be multiplied by a function of 
x, and y by a function of y. Non-linear transformations can be used 
to alter not just the size or position or skewness of an image but to 
change the shape by changing the relative size of different parts of 
the image. Thus ‘drastic’ alterations of shape can be achieved and 
adjusted with non-linear transformations. Non-linear transforma- 
tions are potentially as useful as linear transformations in 
mathematically based computer art. They are however a little more 
difficult to understand. An everyday example of a non-linear 
transformation is reflection in a distorting mirror. Distorting mirrors 
distort because their surfaces are curved rather than plane. 

In this section we will look at non-linear transformations using 
the work of the biologist D’arcy Thompson as an example. Another 
area of interest is the intriguing world of anamorphic art. Ina later 
chapter we will look at the use of non-linear transformations in three 
dimensions. 


D’arcy Thompson and transformations in nature 

In his remarkable book, ‘On Growth and Form’, D’arcy Thompson 
describes how many patterns in nature appear to conform to simple 
mathematical rules. One of the most frequently referenced chapters 
in this book is entitled: ‘The comparison of related forms’. In this he 
says: 


“In a very large part of morphology, our essential task lies in the 
comparison of related forms rather than in the precise definition 
of each; and the deformation of a complicated figure may be a 
phenomenon easy of comprehension, though the figure itself 
may have to be left unanalysed and undefined. This process of 
comparison, of recognizing in one form a definite permutation or 
deformation of another, apart altogether from a precise and 
adequate understanding of the original ‘type’ or standard of 
comparison, lies within the immediate province of mathematics, 
and finds its solution in the elementary use of a certain method of 
the mathematician. This method is the Method of Coordinates, 
on which is based the Theory of Transformations.” 


What he is saying is that we may be able to take a shape, say a leaf 
from a tree of one species, subject it to a transformation, and 
produce a shape that is a leaf from another species of tree. In his 
work he restricts himself to ‘shapes’ by which he means the two- 
dimensional outline of a three-dimensional object. 

Let us look first of all at this idea using a familiar linear transfor- 
mation and then move on to non-linear transformations. Figure 3.14 
shows the original sketches by D’arcy Thompson showing how the 
outline of the species Argyropelecus Olfersi transforms to the outline 
of Sternoptyx Diaphana. This transformation is linear and is the x 
shear transformation introduced above. The four photographs 
show the original fish, digitized from the sketch, followed by the 
output from a program that applies an x shear transformation. The 
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Figure 3.15 (opposite) 
Simulation of a D’arcy 
Thompson sketch using a 
hyperbolic-ellipse non-linear 
transform 


values of S used to produce the three transformed fishes were 0.3, 
0.5, and 0.7 respectively. In the program we use a procedure to draw 
the fish, a procedure that invokes a window viewport transforma- 
tion (that ensures that the origin is the bottom left hand corner of the 
minimum area rectangle that encloses the fish) and a procedure that 
performs the linear transformation. 

Now look at Figure 3.15. The original sketch shows a Diodon 
outline being transformed into a Orthagoriscus outline using a non- 
linear transform. We are now multiplying x and y by terms that 
contain x and y. For example: 


xnew = 3*oldx 
ynew 2*oldy 


is a linear transformation that we have already met, but: 


xnew = 3*oldx*xoldx 
ynew = 2xoldy 


is a non-linear transformation. The non-linear aspect of this 
transformation can easily be seen by examining Figure 3.15. Here a 
grid made up of lines of constant x and y has been transformed using 
this transformation. 

Although D’arcy Thompsons illustrations were sketches (he 
never produced mathematics for his transformations) we can see 
from the sketch that lines of constant x are mapped into curves, and 
lines of constant y are mapped into curves that look similar. Now an 
easy non-linear transformation that fits this observation is a hyper- 
bolic-ellipse transform. Lines of constant x are mapped into seg- 
ments of ellipses and lines of constant y into hyperbolas. The 
transformation is: 


, 


x 


y’ 
Sinh and cosh are hyperbolic sine and cosine functions. Figure 3.16 
shows an original Diodon outline together with three applications of 
the transform for values of a = 1.5, 2 and 2.5. You can see from this 
how a brilliant scientific observation conceived in the 1930s could 
have benefited from the availability of a computer. D’arcy would 
probably have given his right arm for an Electron! 

We use exactly the same programming techniques as before. The 
window viewport transformation now has to position the fish so 
that the tip of its nose is now on the origin. The transformation 
procedure is given as Program 3.5. The functions sinh and cosh are 
not standard BASIC functions but they can be defined in terms of 
the BASIC function EXP. The detail of the mathematics is unimpor- 
tant. We are simply using a mathematical recipe to effect a particular 
non-linear transformation. 


sinh(x) X cos(axy) 
cosh(x) X sin(aXy) 
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Anamorphic art 
Another fascinating application of non-linear transformations is 
anamorphic art. (ana = back again, morphe = form). Here the 


Figure 3.16 analogy of distorting mirrors is more direct because a distorting 
Applying the hyperbolic- mirror (an anamorphoscope) is needed to decode or unscramble the 
ellipse transform: picture. 

(a) computer original; (b) a = Anamorphic art has been known for the last three centuries. An 
1.5; (c) a = 2; (d)a = 2.5 anamorphic painting is one that has been distorted by a transforma- 


fe 


100 DEF PROCtransform 

110 xt = FNsinh(x)*COS(Caxy) 
1200 yt = FNcosh(x)*SIN(axy) 
130 ENDPROC 


140 DEF FNsinh(x)=CEXP(x)-EXP(-x))/2 
150 DEF FNcosh(x)=CEXP(x)+EXP(-x))/2 


Program 3.5 A hyperbolic-ellipse transformation. 


tion so that it is difficult to perceive any form in it other than the 
‘streaks’ formed by the transformation. The distortion is removed 
by viewing the picture via an anamorphoscope. The most common 
and easily constructed devices are cylinders and cones, and the 
most common anamorphic pictures are constructed to be decoded 
by either a cylinder or cone. Colour Plate 14 is a cylindrical 
anamorphic picture. Cylindrical anamorphic pictures are viewed by 
placing a cylindrical mirror at the indicated point and looking into 
the surface of the mirror (Figure 3.17). You can easily construct such 
a mirror by using a small sheet of Mylar (kitchen foil wrinkles too 
easily) wrapped around a convenient cylinder (such as a toilet roll 
centre). This can be used to reconstruct Colour Plate14 as well as the 
images shown in Figures 3.20 and 3.21. Anamorphic paintings 
together with cylindrical and conical mirrors were sold as fashion- 
able toys in the 17th and 18th century. Even pornographic examples 
are known and perhaps this was an early use of mathematical 
transformations to disguise the salaciousness of the material. The 
eroticism is invisible behind the distortion of a non-linear transfor- 
mation needing a special device to bring it to life, not unlike the way 
in which pornography is buried in the ferromagnetic particles of 
video tapes needing a complex device to unscramble the signal. 
Anamorphic transformations have serious applications in 


Cylindrical 
mirror 
rad 
a 


Reconstructed a 
image 


Anamorphic 
image 
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Figure 3.17 
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Reconstruction of a cylindrical 


and anamorphic image 
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Figure 3.18 cinematography. In 1953 ‘The Robe’ was made by 20th Century Fox. 
Jean Francois Niceron’s This was the first cinemascope movie to be made. Anamorphic 
method of drawing cylindrical Jenses were used to compress the wide angle image onto 35mm film. 
anamorphic pictures (1638) A distorted image is recorded on the film. When the film is pro- 
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Figure 3.19 

The parameters used in the 
cylindrical anamorphic 
transformation 


jected, anamorphic lenses are used to stretch the film onto the wide 
screen. The image on the film is stored in a distorted or anamorphic 
form. Similar systems are in use today in cinematography. In still 
cameras modern wide angle lenses produce a distorted image on the 
film that is uncorrected. Here the distortion is deemed to be accept- 
able or even aesthetic and the image does not need any special 
device to correct it. 

In this section we will look at a program to produce a cylindrical 
anamorphic line image. The intuitive basis of the cylindrical 
anamorphic transformation can be seen from Figure 3.18 (from 
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Figure 3.20 

Cylindrical anamorphic 
transformation a = 1, b= 1, 
G=4 
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Figure 3.21 

Cylindrical anamorphic 
transformation a = 1, b = 1.3, 
$=5 
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Niceron’s ‘La Perspective Curieuse’ — Paris 1638). Lines of constant y 
are mapped into 270° segments of concentric circles and lines of 
constant x into radii. The image fans out in two dimensions, the top 
of the original mapping into the largest circumference. this is 
because when the reconstructing cylinder is placed at the centre of 
the anamorphic image the top of the image is furthest away from the 
cylinder and must map into a larger circumference than the bottom 
of the image which is nearest to the cylinder. 

We already know that to express a coordinate (x,y) in terms or 
(r,8) we use: 


x=rcos8 
y=rsin 0 


The anamorphic transformation is thus: 


x’ = aly + b) cos(kx) 
y’ = aly + b) sin(kx) 


where a is a scaling factor and b and k are the constants (see Figure 
3.19) needed to effect the displacement of the anamorphic image out 
toa finite radius. (So that a hole is left in the middle for the reflecting 
cylinder.) Again we are not concerned with mathematical 
‘propriety’. It is only sufficient that you understand the general 
principle involved. The procedure captioned Program 3.6 performs 
the required transformation. Figure 3.20 and 3.21 show an 
anamorphic transformation of a butterfly using values for the con- 
stants as shown in the captions. The circle shows the ideal radius of 
the reconstructing cylindrical mirror and within the circle is the 
image that you should see in the cylinder. 

The figures show both screen photographs and output from a 
high quality incremental plotter for comparison. This allows a hard 
copy image to be produced that is faithful to the notional coordinate 
system used in the program (1280x1024). Bear in mind that it is the 
scan conversion software in the system ROM that maps an image 
defined in the BASIC program 1280x1024 system into a 640x320 
image (or whatever depending on the mode selected). The incre- 
mental plots were generated by writing a list of coordinates in the 
BASIC program 1280x1024 system to a file and then using that file 
to drive the incremental plotter. The line plotter illustrations in this 
book were made using a high quality plotter. If you do not have 
access to such equipment the images that you produce will be 
fuzzier and more jagged. However bear in mind that this is owing to 
the limitation of your display device and that your program is 
producing coordinate values at the resolution shown in the incre- 
mental plotter illustrations. 


100 DEFPROCtransform 
110 xt = a*(ytb)*COSCk*x) : yt = akCytb)*SINCk*x) 
120 ENDPROC 


Program 3.6 A cylindrical anamorphic transformation. 
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4 Symmetry and two- 
dimensional ornamentation 


In this chapter we will explore the use of the computer not only to 
draw decorative motifs but to locate them as part of the grand design 
of two-dimensional decorative patterns such as those found in 
wallpapers, fabrics, carpets or porcelain ornamentation. To fully 
exploit the power of the computer to place motifs (i.e. to design two- 
dimensional patterns as translations of motifs) we must adopt a 
scheme for classifying two-dimensional groupings and appreciate 
the differences between the various ways motifs can be arranged. 

The maths introduced in this chapter is fairly simple and is just a 
scheme for classifying the different symmetries that can occur in 
two-dimensional patterns. We can then use these formalisms to 
control the use of the two-dimensional linear transformations and 
produce elegant patterns. Although symbolic classifications exist 
for two-dimensional patterns, we can ignore these because all we 
need is a labelling or classification scheme and an appreciation of the 
differences between the different pattern schemes. The mathema- 
tics of these patterns gives us a method for writing programs that 
draw the patterns. Just as we need a language to get the computer to 
draw straight lines in a certain way — so we need a language at a 
higher level to design the program structures that control the primi- 
tive graphics statements. This language is the mathematics of 
symmetry. 

The chapter is mainly devoted to programming structures for the 
production of 23 examples of pattern classes. There are exactly 
seven frieze or band groups and 17 wallpaper groups. These seven 
frieze groups and 17 wallpaper groups specify all the possible ways 
in which one can arrange motifs so that the final pattern exhibits 
certain kinds of symmetry. Any repetitive two-dimensional 
arrangement for placing motifs will fall into one of these categories. 
In looking at these groups we use a labelling scheme that follows the 
scheme of Shubnikov (Symmetry in Science and Art — 1974). 
Although mathematicians adopt a rigorous labelling system using 
algebraic notation to show the relationships between groups (a 


subject known as Group theory) we will simply use a numeric 
scheme: band1, band2, ...band7, net1, net2, ...net17. The symme- 
try of each pattern will be described, but not mathematically. All 
that is required is an intuitive appreciation of the groups and their 
relationship to the program that produced them. 

This area of graphics programming is potentially very rewarding. 
It is rather like composing music. The computer is your instrument 
producing the final sound, and the mathematics are the rules of 
harmony that control the type or structure of the music produced. 
And like musical composition you are limited only by your imagina- 
tion. The patterns we have produced are just examples that illustr- 
ate the underlying principle: you can produce anything that you 
want. We have tended to stick to traditional motifs and recipes for 
combining them into a two-dimensional design, but try and be 
creative and use your own motifs and ideas to get your machine to 
conjure up unique patterns. 

Many beautiful patterns can be created easily. We are using the 
computer not only for the mundane task of generating and repeat- 
ing the motifs but to experiment with the various classes. This 
process (imagining how a finished pattern will look given a collec- 
tion of motifs and proposed symmetry relationships) is very difficult 
to perform manually. A great deal of skill and experience as a 
pattern designer, together with a good knowledge of symmetry is 
essential. You can however use the computer as a substitute for this 
experience and experiment freely. 

Of course it is unlikely that the designers of such beautiful and 
intricate patterns as those shown in Colour plate 15, which are from 
Jones’s massive work (The Grammar of Ornament — London 1856) 
had any formal knowledge of symmetry. They would use ex- 
perience passed on from generation to generation, catalogues of 
motifs and methods built up over many years, a major reflection of 
their culture. In fact there is apparently no single culture with all 23 
groups occurring in its traditional formal ornamentation. 


4.1 TYPES OF SYMMETRY 


Before looking at the symmetry of band and network patterns we 
will review some simple concepts of symmetry types. 


Symmetry of single motifs — plane of symmetry 

The bodies of men, mammals, fish, birds and insects all have a 
symmetry plane. In a two-dimensional outline this symmetry plane 
is a line (Figures 4.1 and 4.2). In images classified as having a 
symmetry plane m two objects are arranged relative to one another 
as one object and its mirror image. The symmetry plane or line 
divides the image into an object and its mirror image . In reality the 
image can be made up ofa single object that exhibits symmetry m, as 
in Figure 4.1 (half the object is the mirror image of the other half), or 
two objects can be arranged as object/mirror/object. (Figure 4.2) 
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Figure 4.1 
A single object that possesses 
mirror symmetry 


Figure 4.2 

A pattern that possesses 
mirror symmetry made by 
reflecting an asymmetric 
motif 


Given an object or half an object, an image exhibiting symmetry m is 
obtained by using the linear transformation for reflection about the y 
axis. Variations of Program 4.1 produced Figure 4.1 and 4.2. 


Symmetry of single motifs — axis of symmetry 

Figures that possess an axis of symmetry are figures that coincide 
with themselves when rotated about this axis. Such figures may or 
may not contain a plane of symmetry. Figure 4.3 is a page from Ernst 
Haeckel’s ‘Kunstformen der Natur’ (Leipzig 1904) showing micro- 
organisms with five-fold rotational symmetry. Each time a five-fold 
figure in Figure 4.3 is rotated through 72° it forms a figure in- 
distinguishable from the original (apart from any imperfections in 
the sketch or nature). The axis of rotation is a line perpendicular to 
the plane of the figure or paper and passing through the centre 
point. 


10 CLS 

20 INPUT "File name",file$ 

30 MODE 0 : VDU 29,640;512; 

40 PROCdrawmotif(1,0,200,0,1,0) 
50 PROCdrawmotif(-1,0,-200,0,1,0) 
60 END 


70 DEF PROCdrawmotif(a,b,c,d,e,f) 
80 =fi le=OPENIN(fi les) 


90 REPEAT 

100 INPUT£ file,plotop,x,y 

110 PROCtransform(a,b,c,d,e,f) 
120 PLOT plotop,xt,yt 


130 UNTIL EOF£ file 
140 CLOSE£ file 
150 ENDPROC 


160 DEF PROCtransform(a,b,c,d,e,f) 
170 xt = x*a + y*b +c 

180 yt = x*d + y*xe + f 

190 ENDPROC 


Program 4.1 Generating pictures with mirror symmetry. 


The smallest angle of rotation that brings the figure into coinci- 
dence with itself (72° in this case) is called the elementary angle of 
rotation. The number of coincidences that occur in one rotation is 
the order of the axis. The organism labelled (1) in Figure 4.3 
possesses both rotational and mirror symmetry. Its rotational sym- 
metry is order five and it can be reflected about a vertical line 
through its centre. Examples of this type of symmetry abound in 
nature. Note that organism (8) in Figure 4.3 only possesses mirror 
symmetry and that part of (9) possesses five-fold rotational symme- 
try but the whole exhibits mirror symmetry only. Study of Figure 
4.4, also from Haeckel’s classic work will give further appreciation 
of these points. The figures exhibit a combination of mirror symme- 
try and three, four, five and six-fold rotational symmetry. 

To generate a figure possessing axial symmetry of order m using a 
motif, we need a FOR loop that increments a rotational angle by the 
elementary angle of rotation. Program 4.2 produced the patterns 
shown in Figure 4.5. Figure 4.5a is an example of a figure with axial 
symmetry of order five but no mirror symmetry. 


4.2 PROGRAM ORGANISATION 


The remainder of this chapter is devoted to the production of the 
seven frieze groups and 17 wallpaper groups. The programs that 
control the arrangement of each of the 23 groups are listed, together 
with examples produced by the program and examples from Jones. 
All programs produce patterns from the simple motif which is an 
asymmetrical triangle. Using a common shape for each group 
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Figure 4.3 
Ophiodea 


means that we can compare groups and appreciate the differences 
and similarities between groups without distractions due to the 
shape of the individual motif. In principle the program required to 
produce patterns that contain more complex motifs will be identical, 
only PROCdrawamotifat will change. The actual motif data used is 
too long in most cases to be included in the text. You can make up 
your own using a digitizer or the techniques described in Chapter 2. 
Alternatively you can use mathematically generated motifs as we 
have in some cases. All of the mathematically generated motifs are 


selected from Chapter 10. 

As far as handling the data is concerned there are three possible 
approaches when motifs are being drawn and redrawn. Originally 
the motif data will be on file and PROCdrawmotifat can simply read 
and re-read from the file. This is the simplest approach but is only 
suitable if the file is on disc. If the file is a cassette file then it should 
be read once only and transferred into an array. This method has the 
advantage that any transformations, such as reflection, need only 
be calculated once. The motif can be reflected and the reflected 
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10 CLS 

20 INPUT "File name",files 

30 MODE O : VDU 29,640;512; 

40 r = 300 

50 FOR theta = 72 TO 360 STEP 72 

60 t = RAD(theta) 

70 = PROCdrawmotif(COS(t), -SIN(t), r*COS(PI/2+t), 
SINCt), COS(t), r*SIN(PI/2+t)) 

80 NEXT theta 

90 END 


100 DEF PROCdrawmotif(a,b,c,d,e,f) 
110 file=OPENIN( files) 


120 REPEAT 

130 INPUT£ file,plotop,x,y 

140 PROCtransform(a,b,c,d,e,f) 
150 PLOT plotop,xt,yt 


160 UNTIL EOFF£ file 
170 CLOSE£ file 
180 ENDPROC 


190 DEF PROCtransform(a,b,c,d,e,f) 
200 xt = x*xa + y*b +c 

210 yt = xxd + yxe + f 

220 ENDPROC 


Program 4.2 Generating a figure with axial symmetry. 


version stored in the same array. This approach is adopted in the 
seven programs that draw the seven frieze or band groups. The file 
Figure 4.5 is replaced by a single DATA statement and the programs are 
Motifs forming axial organized around arrays. In the 17 wallpaper group programs the 
symmetry: (a) five fold; (b) six other approach is adopted, reading and re-reading from the same 
fold file (again the file is simulated by a single DATA statement). This 
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technique is preferred because it is simple but again it is only 
suitable for disc files. A third approach is to store the motif data in 
the program as a set of DATA statements that are created froma file 
automatically. Here you need a pre-processing program that con- 
verts the file data into DATA statements for incorporation in a 
program. This can be done using the *SPOOL and *EXEC 
commands 

In the wallpaper groups each motif is defined as a list of absolute 
coordinates and VDU 29 is used to position a motif. Note that in the 
more complex wallpaper groups some idiosyncratic adjustment is 
necessary to position the triangles as required. This is because the 
only sensible position for the point (0,0) of a motif is its centre of 
gravity or the centre of a minimum area enclosing triangle. This 
means that when, for example, a triangle is reflected it partially 
overlaps the original and a displacement is required. The correct 
displacement for each grouping is a function of motif size and 
shape, the grouping being used and aesthetic consideration, and 
cannot be conveniently specified in advance for any motif. 


10 DIM control(100), x(100), y¢100) 
20 MODE 0 

30 PROCinitialise 

40 FOR motif = 1 TO noofmotifs 

50 PROCdrawmotifat(x, y) 

60 x = x + period 

70 NEXT motif 

80 END 


1000 DEF PROCinitialise 

1010 x= 100: y = 400 

1020 period = 200 : noofpoints = 3 : noofmotifs = 6 
1030 RESTORE 

1040 FOR i = 1 TO noofpoints 

1050 READ control(€id, x€i)d, yi) 

1060 NEXT 

1070 ENDPROC 


1080 DATA 1,0,30,1,-80,0,1,80, -30 


1090 DEF PROCdrawmotifat(x, y) 

1100 VDU 29,x;y; : MOVE 0, O 

1110 FOR i = 1 TO noofpoints 

1120 PLOT control(€i), xi), yCi) 
1130 NEXT i 

1140 ENDPROC 


Program 4.3 Band group 1. 
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Figure 4.6 
Band group 1 


4.3 SYMMETRY OF BANDS OR STRIPS 


Our aim in studying symmetry classifications is to use them to write 
programs that control two-dimensional linear transformations such 
as translation, rotation, reflection etc. operating on motifs. In this 
section we introduce the control of transformations for a class of 
patterns known technically as one-sided bands or friezes. These are 
strip patterns used extensively in fabric design and architectural 
decoration. Their more familiar names are bands or friezes. In a 
band pattern, a motif or group of motifs is repeated at intervals in 
one dimension. 


Band group 1 

The first symmetry class of band patterns that we consider is shown 
in Figure 4.6. In this figure, and subsequent figures in this section 
the plotter output is made up of three elements. The top illustration 
is a series of right angled triangles positioned to form the pattern 


class, followed by a series of the letter ‘F’. The next pattern is 
generated from a digitized motif or motifs (except Band group 6 
which uses DATA statements). The photo shows an example of the 
pattern from Jones. Figure 4.6 shows patterns belonging to the first 
band group. These are patterns with one translation axis and no 
other type of symmetry. Displacements may take place in direction 
left or right and the pattern comes into coincidence with itself after it 
moves through distance a, the elementary translation or period. It is 
easy to generate this pattern from a single motif and Program 4.3 
produced the computer illustrations shown. The required program 
structure is a FOR loop controlling a translation through the period a 
for as many instances of the motif as are required. 

We can either use our system of homogeneous coordinates for the 
translation or simply move the origin through the period each time. 
This is the most efficient mechanism, so it is the one we employ in 
the program. As we are using the motif over and over again we read 
the data from a file or DATA statements once only and transfer the 
motif data into three arrays. It is more efficient to move the origin 
each time and use the same data because we do not have to get 
involved in multiplications of (x,y) for the translation transforma- 
tion. Clearly the efficiency factor becomes more and more important 
as the ‘complexity’ of the motif (the number of points in it) increases. 
There is also the problem with cassette files (already discussed) that 
this method overcomes. 

An interesting point is that mathematically the rosette patterns, 
(Figure 4.5, for example) generated using axial rotation, and the 
band patterns generated using translation are theoretically 
equivalent. The translation is rotation about an infinitely distant 
axis. Another point that can be made is that although the direction 
of the translation may be left or right the translation axis is ‘polar’. If 
we travel along that translation axis for the triangle pattern we 
encounter a sharp point followed by a blunt end or a blunt end 
followed by a sharp point depending on our direction of travel. The 
patterns can be used to give an impression of motion and may be 
employed, for example, in a corridor in which traffic is unidirec- 
tional. You can see this in the ‘flow’ in Figure 4.6b. The computer 
generated example is rather static, demonstrating that there is a 
good deal of aesthetic judgement involved in generating such pat- 
terns. The particular frieze shown is Greek in origin. Note that the 
motifs almost have mirror symmetry. 


Band group 2 

In the second symmetry class shown in Figure 4.7 there is a glide- 
reflection plane or mirror-glide plane. A glide-reflection is a com- 
bination of a reflection plus a translation. The glide plane coincides 
with the translation axis and the figure comes into coincidence with 
itself after translation through a distance a/2 and reflection. The 
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Figure 4.7 
Band group 2 
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translation and glide-reflection axes lie in the same plane. 

Shubnikov (in ‘Science and Art’ 1974) says of this class of pattern: 
‘Whereas bands with a single symmetry element — a translation axis 
— are suitable for representing progressive motion in one direc- 
tion..., bands with a translation axis and glide-reflection plane 
create the impression of sinuous motion like that of a snake’. This 
facet is not too well demonstrated by the sea horse motif because of 
its aspect ratio. 

The program that generated the computer illustrations is Program 
4.4. Again you can see the nature or symmetry of the pattern 
reflected in the program structure. Again we use a FOR loop to 
repeat the motif. In programming terms it seems most convenient to 
draw the top motifs then the bottom ones so that two consecutive 
FOR loops are required. We start the second row of motifs a/2 from 
the first row and subject each to an x axis reflection. Again from the 
efficiency point of view we should only perform the reflection once 
and this is carried out between the FOR loops. Of course using 
homogenous coordinates we can combine the translation and mir- 
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ror reflection into one net transformation matrix but for reasons 
already explained we proceed as in the program. Note also that the 
two FOR loops that control the drawing of the motifs are identical. 
We have left the loops like this for emphasis. Later the FOR loops 
will be contained in a procedure. The illustration in Figure 4.7b is 
from Jones and the frieze is Greek. 


Band group 3 

Now if we return to the first band class and consider group of motifs 
that posses axial symmetry of order 2, that is, the elementary motif 
coincides with itself after rotation through 180° we have class 3. 
Examples of bands with such symmetry are shown in Figure 4.8. 
Note that the bands tend to impart a feeling of motion in both 
directions. The program that generated the computer examples is 
Program 4.5. It has exactly the same structure as the previous 
program. Rotation is carried out once only between the FOR loops 
that generate the top and bottom halves of the pattern The illustra- 
tion in Figure 4.8b is from Jones and again it is Greek. 
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Band group 3 
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DIM control(100), x(100), y(100) 

MODE O 

PROCinitialise 

FOR motif = 1 TO noofmotifs 
PROCdrawmotifat(x, y) 
x = x + period 

NEXT motif 

PROCinitialise 

y = y - 100 : x = x + period/2 

PROCref lect 

FOR motif = 1 TO noofmotifs 
PROCdrawmoti fat (x,y) 
x = x + period 

NEXT motif 

END 


DEF PROCref lect 


FOR i = 1 TO noofpoints 
yi) = - yCidD 
NEXT 7 
ENDPROC 


Program 4.4 Band group 2. 
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DIM control(100), x(100), y (100) 
MODE 0 

PROCinitialise 

FOR motif = 1 TO noofmotifs 


PROCdrawmotifat(x, y) 
x = x + period 
NEXT motif 
PROCinitialise 
x = x + period/4 : y = y - 100 


PROCrotate 

FOR motif = 1 TO noofmotifs 
PROCdrawmotifat(x, y) 
x = x + period 

NEXT motif 

END 


DEF PROCrotate 


FOR i = 1 TO noofpoints 
y(i) = -yGi) : xi) = -x¢i) 
NEXT i 
ENDPROC 


Program 4.5 Band group 3. 


DIM control(100), x¢€100), y¢100) 

MODE 0 

PROCinitialise 

FOR motif = 1 TO noofmotifs 
PROCdrawmotifat(x, y) 
x = x + period 

NEXT motif 

PROCinitialise 

x = x + period/12 

PROCref lect 

FOR motif = 1 TO noofmotifs 
PROCdrawmotifat(x, y) 
x = x + period 

NEXT motif 

END 


DEF PROCreflect 
FOR i = 1 TO noofpoints 
xi) = -x¢i) 
NEXT i 
ENDPROC 


Program 4.6 Band group 4. 


DIM control(100), x(100), y(100) 

MODE 0 

PROCinitialise 

FOR motif = 1 TO noofmotifs 
PROCdrawmotifat(x, y) 
x = x + period 

NEXT motif 

PROCinitialise 

PROCref lect 

y = y -100 

FOR motif = 1 TO noofmotifs 
PROCdrawmotifat(x, y) 
xX = x + period 

NEXT motif 

END 


DEF PROCref lect 
FOR i = 1 TO noofpoints 
y@i) = -y(i) 
NEXT i 
ENDPROC 


Program 4.7 Band group 5. 
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Figure 4.9 
Band group 4 
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Band group 4 

The next four symmetry classes involve mirror symmetry planes. 
This makes a total of seven possible symmetry classes for one sided 
bands. The simplest in this category is class 4, examples of which are 
shown in Figure 4.9. Patterns of this class tend to appear as decora- 
tions on horizontal cornices around the top of a room. This group 
contains a vertical or transverse mirror plane. Program 4.6 gener- 
ated the computer illustrations. Again it is convenient to have two 
FOR loops generating the odd numbered motifs 1, 3, 5, 7 followed 
by a mirror reflection and a generation of the even numbered motifs 
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Figure 4.10 
Band group 5 


6 The art of microcmputer ... 


146 ~—s Art of microcomputer graphics 


[ 


2 2. 2 Se SE. SE 


a ‘screen dump to calcom Lotter 


wl. WAG Val : 
eee IK jw * Kh 


Two-dimensional ornamentation 147 


2, 4, 6, 8, etc. The example in Figure 4.9b is a Greek frieze from 
Jones. 


Band group 5 

The next class, the fifth, is shown in Figure 4.10. Here the mirror 
plane m and the translation axis a are parallel. Program 4.7 gener- 
ated the computer illustrations. These patterns are commonly used 
vertically in architectural decoration as demonstrated in the ex- 
amples from Jones. The motif used in the program is a single motif 
exhibiting mirror symmetry rather than a motif and its reflection. 


Band group 6 
The sixth class is obtained by taking the fourth class and adding a 
mirror plane parallel to the translation axis. Examples are shown in 
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10 DIM control(100), x(100), y(100) 
20 MODE 0 

30 PROCinitialise 

40 PROCdrawaband 

50 PROCinitialise 

60 PROCref lectx 

70 y = y - 100 

80 PROCdrawaband 

90 PROCinitialise 

100 PROCreflecty 

110 PROCdrawaband 

120 PROCinitialise 

130 PROCreflectx :PROCreflecty 
140 y = y - 100 

150 PROCdrawaband 

160 END 


170 DEF PROCdrawaband 

180 FOR motif = 1 TO noofmotifs 
190 PROCdrawmoti fat (x,y) 

200 x = x + period 

210 NEXT motif 

220 ENDPROC 


230 DEF PROCreflectx 

240 FOR i = 1 TO noofpoints 
250 y@i) = -y(@i) 

260 NEXT i 

270 ENDPROC 


280 DEF PROCreflecty 

290 FOR i = 1 TO noofpoints 
300 xi) = -xdi) 

310 NEXT i 

320 ENDPROC 


Program 4.8 Band group 6. 
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Figure 4.12 
Band group 7 


Figure 4.11 and the program is Program 4.8. The motifs are gener- 
ated in four bands and the motif generating FOR loop is now 
enclosed in PROCdrawaband which is called four times. 
PROCreflectx and PROCreflecty could of course be combined into 
one procedure with parameters but these have been left as separate 
procedures for clarity. This time the computer example is generated 
from a group of DATA statements rather than a digitized motif. A 
group of three Grecian friezes from Jones is shown in Figure 4.11b. 


Band group 7 

Finally a seventh class. This has a both a vertical axis of symmetry 
and a transverse mirror plane. Figure 4.12 shows the output from 
Program 4.9. From a study of the pattern class it may be seen that the 
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easiest way to handle this case is to construct a double size motif 
containing the original and a rotated version and plot this as a unit. 
The problem is then reduced to that of class 4. Figure 4.12b shows an 
example from Jones. This time the pattern is Arabian. 


10 DIM control(100), x(100), y¢100) 
20 MODE 0 

30 PROCinitialise 

40 PROCdrawaband 

50 PROCinitialise 

60 PROCreflectx 

70 x = x + period : y = y - 100 
80 PROCdrawaband 

90 PROCinitialise 

100 PROCreflecty 

110 x = x + period 

120 PROCdrawaband 

130 PROCinitialise 

140 PROCreflectx : PROCreflecty 
150 y = y - 100 

160 PROCdrawaband 

170 END 


180 DEF PROCdrawaband 

190 FOR motif = 1 TO noofmotifs 

200 IF motif MOD 2 = 1 THEN PROCdrawmotifat(x,y) 
210 x = x + period 

220) =NEXT motif 

230 ENDPROC 


240 DEF PROCreflectx 

250 FOR i = 1 TO noofpoints 
260 yi) = -y(id 

270 NEXT i 

280 ENDPROC 


290 DEF PROCreflecty 

300 FOR i = 1 TO noofpoints 
310 xi) = -xdi) 

320 NEXT i 

330 ENDPROC 


Program 4.9 Band group 7. 
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Summary of band pattern symmetry 
We can summarize the symmetry of band patterns by using a 
flowchart classification. Here the patterns are classified by asking 
three questions. Firstly, is there 180° rotational symmetry? Se- 
condly, is there a vertical reflection? Finally, is there a horizontal or 
glide reflection? Figure 4.13 shows the band pattern decision tree. 
If you want to develop expertise in generating band patterns, 
then familiarity with the seven groups is necessary. One of the 
easiest ways to build up proficiency is to use the decision tree to 
study examples from everyday life. Theses are all around us on both 
the interior and exterior of buildings. 


4.4 NETWORK PATTERNS 


In this section we will look at how we can generalize into two 
dimensions and create network patterns by controlling the instanc- 
ing or placing of motifs in two dimensions. Again it is worth 
emphasising that you are only limited by your imagination and by 
the initial motifs that you choose. 

When instancing or placing motifs in one dimension for band 
patterns, we simply placed motifs, or groups of motifs, at equal 
intervals. Now when we are instancing or placing motifs in two 
dimensions we use one of a number of translation nets to control the 
motif translations. These are parallelogram nets, of which there are 
five. (Figure 4.14) The five categories are square, rectangular, obli- 
que, equilateral and rhombic. Each intersection in a net defines a 
point in two-dimensional coordinate space where the motif is to be 
placed. Each net can be defined by the parameters a, b and 6, where 
aand bare the elementary distances or periods in the two directions 
or axes and @ the angle between these axes. We can use the five 
translation nets on our asymmetric motif: the right-angled triangle. 
Four of these are shown in Figure 4.15. The program that generated 
this figure is Program 4.10. The program structure is, of course, a 
nested FOR loop. The innermost FOR loop generating a row or band 
and the outermost controlling the translation down the vertical axis. 
Note that the program will handle square, rectangular, equilateral 
and rhombic nets as it stands. For parallelogram nets lines 30, 40 and 
120 need changing. Now even although these patterns look dif- 
ferent they all form a single symmetry network classification, net- 
work group 1. Thus the symmetry class is, in general, independent 
of the translation net. However if the motif itself possesses axial 
symmetry, then using different translation nets may result in dif- 
ferent symmetry classes. (Compare the sixth and seventh class 
below.) 

Another point that we must note at this stage is that we are using 
network symmetry to place pre-drawn motifs. Using the network to 
divide up the plane into equal figures without gaps or overlaps is 
known as tessellating. Mathematically both processes are one and 
the same but computationally they require completely different 
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Figure 4.13 
Decision tree for classification 
of band groups 
Square Equilateral triangle Rhombic 
Figure 4.14 
The five parallelogram nets 
Rectangular Oblique-parallelogram 


for motif placement 
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Figure 4.15 

Output from program 4.10: 
(a) rectangular 90, 135, 35; 
(b) square 90, 100, 100; 

(c) equilateral 60, 100; 

(d) rhombic 30, 125 


approaches. This difference is illustrated in Figure 4.16. Tessela- 
tions are covered fully in the next chapter. 


The translation nets themselves possess symmetry. Their attri- 
butes are summarized in Table 4.1. 


Higher symmetries than those possessed by the net are possible 
and these depend on the inherent symmetry of the motif. For 
example the symmetry of a pattern produced by using the square 
net may have a higher symmetry than the translation net if the motif 
possesses symmetry. 

We now come to the task of classifying the possible symmetries of 
network patterns. There are 17 of these and examples of all 17 
classes, using the asymmetrical triangle as a motif are shown 
together in Figure 4.17 for the purposes of comparison. For each 
class there is a short informal description, a program, an example 
using the right angled triangle, a more elaborate computer gener- 
ated example and, for all cases except one, an example from Jones. 
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Table 4.1 Translation net attributes 


Net Classification Proportions of 
unit mesh 

Square ala a=b,0=90° 
Equilateral 

Triangle ala a=b,8= 60° 
Rhombic ala a= b,0 = 90° 
Rectangular alb a=b,6=90° 
Oblique 

parallelogram alb a=b,0= 90° 


| means the axes are mutually perpendicular 
/ means the axes are oblique 


280 


DIM control(100), x(100), y¢100) 
MODE O 
INPUT theta 
IF theta = 90 THEN INPUT a, b ELSE INPUT a : b = (a/2)*TANCRAD(theta)) 
PROCinitialise 
FOR row = 1 TO noofrows 
FOR motif = 1 TO noofmotifs 
PROCdrawmotifat(x, y) 
x=xta 
NEXT motif 
y= y= b 
IF theta = 90 THEN x = 100 
ELSE IF row MOD 2 = O THEN x = 100 
ELSE x = 100 + a/2 
NEXT row 
END 


DEFPROCdrawmotifat(x, y) 
VDU 29,x;y;: MOVE 0, 0 
FOR 1 = 1 TO noofpoints 
PLOT control(i), x(id, yCid 
NEXT i 
ENDPROC 


DEFPROCinitialise 
x = 100 : y = 1000 : noofpoints = 3 : noofmotifs = 8 
noofrows = 8 
FOR i = 1 TO noofpoints 
READ control¢€i), xi), yi) 
NEXT 
ENDPROC 


DATA 1,60,0,1,0,20,1,-60,-20 


Program 4.10 Demonstration of different translation nets. 


153 


154 Art of microcomputer graphics 


Figure 4.16 

(a) Placing motifs on a 
rectangular net; (b) 
Tesselating the plane using 
the same motif 


The easiest way to view the process is as follows. To generate each 
group or class we select a particular translation net and place the 
motif or cluster of motifs at each point determined by the transla- 
tion. The different groups are then categorised according to the 
symmetry exhibited by the motif clusters. The axial or cluster sym- 
metry ot the motif group then influences the overall symmetry of 
the network. A leisurely study of Figure 4.17 will help you to 
appreciate this point. 


Network group 1 

This is the simplest network group. It is generated by placing a 
single motif at each of the specified points in a translation net. 
Another way of looking at it, is that it is generated by translating 
band group 1 down a generally oblique axis. Providing the single 
motif is asymmetric the resulting network possesses no symmetry 
whatever. This means that if you consider the pattern printed on 
paper you cannot fold the pattern in any way that superimposes the 
part of the pattern on itself. Also there is no perpendicular axis 
about which the pattern can be rotated and come into coincidence 
with itself after rotation (apart from 360°). 

The program for this network group is almost identical to the first 
band program. We generate a band and repeat this as many times as 
we require rows. Alternatively we can generate a column and repeat 
this. To keep the programs reasonably short we will write a program 
for each group using just one translation net. All 17 programs that 
follow could be extended to use any allowable translation net. 
Allowable means that any net that preserves the symmetry group 
can be used. For example, all five nets can be used in group 1. 

Program 4.11 generated the computer illustration using the asym- 
metric triangle and the program remains unaltered to generate the 
seagulls — only the data changes. The output is shown in Figure 
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4.18a and b. Figure 4.18c shows a 17th century Persian pattern from 
Jones that belongs to this network group. 


Network group 2 

This group can be generated by vertically translating the second 
band group which was a band with a vertical glide-plane reflection. 
Again the network itself posses no lines of symmetry or axial sym- 
metry, but it differs from the first in that the individual motifs are 
subject to glide reflections. 

The easiest programming approach is to draw one set of motifs in 
one orientation and follow this with another set that is reflected. The 
variable ‘type’ in Program 4.12 distinguishes the motif type. Pro- 
gram 4.12 produced the computer illustrations. Your authors could 
not find a single example of this network in folk art amongst the 
sources available to them. The awkwardness of this group can be 
seen from the fishes shown in Figure 4.19b. It suggests, perhaps, 
that regardless of motif the result is likely to be disturbing. 


Network group 3 

This group comes from the translation of the third band group 
vertically down a generally oblique axis. Again we adopt the pro- 
gram structure used previously — rotating and then rotating back 
again. Again this network group does not possess lines of symme- 
try. It does however possess axial symmetry. If the whole pattern is 
rotated through 180° then the network coincides with itself. 
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Program 4.13 generated the computer illustrations and a compari- 
son of the program structure with the triangle network should 
prove easy. The example from Jones in Figure 4.20c is Egyptian in 
origin. It falls into this network group, however, only if we ignore 
the asymmetry in the bullet shapes in the horizontal bands. 


Network group 4 

Like the previous group this net does not contain any lines of 
symmetry but exhibits 180° axial symmetry. It also contains glide 
reflections. 

The program structure is like the previous two programs except 
that now we have four motif ‘types’. Program 4.14 produced the 
computer illustrations. The pattern from Jones in Figure 4.21c is 
Persian. It is quite difficult to see the relationship between Figure 
4.21a and Figure 4.21c and rather than attempt to describe it in 
words, we leave you to study these two patterns. The difficulty 
arises because the pattern is a tessellation rather then a motif place- 
ment pattern. 

This group seems to be quite rare and the example shown in 
Figure 4.21c appears to be the only one in Jones. 


Network group 5 

This pattern contains also 180° axial symmetry. Unlike network 
group 4, however, it contains lines of symmetry. These are all 
vertical and form a series of parallel vertical lines. If the network is 
folded down any of these lines it will coincide when superimposed 
on itself. Note also that the motif clusters are formed from reflec- 
tions in two directions. 

The structure of Program 4.15, which produced the computer 
illustration is identical to the previous programs — four motif ‘types’ 
are again required. The pattern in Figure 4.22c is from Jones and is 
Egyptian. 


Network group 6 

This pattern contains no axial symmetry. If the network is turned 
through 180° the motif clusters ‘point’ in the opposite direction. It is 
best considered in conjunction with network group 7. Look at the 
difference between these groups in Figure 4.17. 

Network group 6, then, is characterised by no axial symmetry but 
parallel horizontal lines of symmetry. There are also horizontal glide 
reflection axes which do NOT coincide with the symmetry lines. 

Program 4.16 is structured using two motif ‘types’ and a ‘skew’ 
control. The example from Jones in Figure 4.23c is Egyptian. 


Network group 7 
This network group is paired with network group 6. It has lines of 
symmetry in one direction and no axial symmetry. It differs, how- 
ever, from the previous in that the group contains axes of glide 
reflections that DO coincide with the lines of symmetry. It is drawn 
by Program 4.17. 

The example in Figure 4.24c from Jones is Egyptian. It is an 
example of network group 7 by virtue of the spirals. Had the spirals 
been concentric circles it would be an example of network group 9. 


Network group 8 
This network group is best considered paired with network group 9. 
They both possess horizontal and vertical lines of symmetry. In 
network group 8 these lines run through the centres of the four- 
triangle clusters. These centres also forma set of points about which 
there is 180° rotational symmetry. There is, however, another set of 
180° rotational symmetry points. These are on diagonal lines half- 
way between the motif cluster both horizontally and vertically. The 
vertical lines that contain these points are NOT lines of symmetry. 
The group is thus categorised by having lines of reflection and 
centres of 180° rotational symmetry where NOT ALL of these 
centres lie on lines of reflection. It is drawn by Program 4.18. 
Figure 4.25b is made up of ellipses and cardioids (see Chapter 10 


for the appropriate formula). Figure 4.25c is an Indian pattern from 
Jones. 


Network group 9 

This network group is paired with network group 8. It differs from 
this group in that ALL the rotational symmetry centres DO lie on 
lines of reflection. It is drawn by Program 4.19. 

The programming technique is as before. Figure 4.26b is again 
made from ellipses and cardioids. It should be compared with 
Figure 4.25b to appreciate the differences in symmetry and also with 
Figure 4.29b which is the same patterm except that it uses circles 
instead of ellipses. Figure 4.26c is another Indian from Jones. This is 
an intriguing example in that it could be mis-interpreted as an 
example of group 8 if you break the rules and treat one petal as 
belonging to two ellipses. 
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Network group 10 

With network groups 10, 11 and 12 we move on to patterns that have 
90 degree rotational symmetry centres. If the network is rotated 
about these points it will come into coincidence with itself every 90°. 
These groups should be studied together and their differences 
noted. Network group 10 contains no horizontal or vertical lines of 
symmetry. It cannot be folded down any line and coincide with 
itself. Except for idiosyncratic adjustments there is nothing new in 
the structure of Program 4.20. 

You can see from Figure 4.27 that the pattern imparts a feeling of 
rotation. Each motif cluster in Figure 4.27b consists of four separate 
motifs as in Figure 4.27a. The same program structure generated 
both patterns. The single motifs in Figure 4.27b are all anti-clock- 
wise spirals. Each spiral is rotated through 90° just like the triangle. 
the spirals then interleave and join up making a pleasing whole. 
This interleaving and joining is the secret of network pattern mak- 
ing. Some of the computer examples are ‘successful’ in this respect 
(Figure 4.27b for example), others are manifestly unsuccessful from 
an aesthetic point of view (Figure 4.26b for example). It is interesting 
to note that the more ‘successful’ a pattern is, the more difficult it 
becomes to deduce its network group. 

The example, Figure 4.27c, from Jones is Egyptian and again 
imparts a feeling of rotation in one direction. 


Network group 11 

The difference between network groups 11 and 10 can easily be seen 
by examining the corresponding triangle figures. Again there are 
90° rotational symmetry points. This time there are lines of reflection 
(these are diagonal in the triangle diagram). The group is thus 
categorised by 90 degree rotational symmetry points and by having 
reflection lines that do NOT contain these points. It is drawn by 
Program 4.21. The relationship between Figure 4.28a and Figure 
4.28b is perhaps not obvious at first sight. Figure 4.28b is a familiar 
tesselation and is commonly used in modern Western patterns. In 
Figure 4.28b the reflection lines are horizontal and vertical. The lines 
joining points of rotational symmetry are also horizontal and verti- 
cal. These two sets of lines form two non-overlapping rectangular 
nets. You should try and see what motif in Figure 4.28b is equivalent 
to the triangle in Figure 4.28a. 


Figure 4.28c is an Egyptian example from Jones and you can see 
the similarity between this and the computer generated pattern. An 
interesting point about this pattern is that even although the basic 
generating motifs that determine the symmetry are four spirals, the 
impression of the pattern is of rectangles with spirals at the corner. 
This is another case where the actual network symmetry is ‘buried’ 
and occupies a place of apparently less significance than some 
incidental effect that gives the overall aesthetic impact to the 
pattern. 


Network group 12 
Out of the set of network groups 10, 11 and 12, this one is concep- 
tually the easiest. It is categorised by having 90° rotational symmetry 
centres and lines of reflection on these centres. It is drawn by 
Program 4.22. 

Figure 4.29b is identical to Fig4.26b except that circles are used 
instead of ellipses. Figure 4.26b of course, only contains 180 degree 
rotational symmetry points. The example from Jones is Persian. 


Network group 13 

Network groups 13, 14 and 15 all have 120° rotational symmetry 
points. Network group 13 does not contain any lines of symmetry. 
Program 4.23 now contains procedure calls that rotate the motif 
through angles other than 90°or 180°. 

Figure 4.30b is made up from a single spiral rotated through 120° 
and 240°. It corresponds exactly to the pattern made up of triangular 
motifs. Figure 4.30c, the example from Jones, is Moorish and taken 
from the Alhambra. 


Network group 14 

Network group 14 contains two overlapping nets of 120° rotational 
symmetry centres. It differs from network group 15 in that one of 
those nets does NOT coincide with lines of reflection. There are 
lines of reflection at three different orientations in network group 
14. This can easily be seen in Figure 4.31b, the computer example, 
drawn by Program 4.24, which is based on a traditional Chinese 
lattice. Again you should study this pattern and try and deduce the 
elementary motif that corresponds to the triangle. The example 
from Jones in Figure 4.31c is Persian. 
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a [screen dump to calcomp plotter 


Figure 4.18 
Network group 1 p screen dump to calcomp plotter 


10 MODE 0 
20 FOR xx = 100 TO 900 STEP 200 
30 skew = 0 


40 FOR yy =250TO 750 STEP 100 
50 skew = skew + 30 

60 PROCdrawmoti fat (xx+skew,yy) 
70 NEXT yy 

80 NEXT xx 

90 END 


100 DATA 4,-20,-10,5,+20,-10,5,20,10,5,-20,-10 


110 DEF PROCdrawmotifat(xx, yy) 
120 RESTORE 

130 VDU 29,xxzyy; 

140 FOR point = 170 4 

150 READ plotop, x, y 

160 PLOT plotop,x,y 

170 NEXT point 

180 ENDPROC 


Program 4.11 Network group 1. 
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a |screen dump to calcomp 


Figure 4.19 
Network group 2 
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MODE 0 
type = 1 
FOR xx = 100 TO 900 STEP 200 
FOR yy =250 TO 750 STEP 100 
PROCdrawmotifat(xx, yy) 
NEXT: NEXT 
type = 2 
FOR xx = 200 TO 950 STEP 200 
FOR yy = 300 TO 800 STEP 100 
PROCdrawmotifat(xx, yy) 
NEXT : NEXT 
END 


DATA 4,-20,-10,5,+20,-10,5,20,10,5,-20,-10 


DEF PROCdrawmotifat(xx, yy) 
VDU 29,xx3yy; 
RESTORE 
FOR point = 1 TO 4 
READ plotop, x, y 
IF type = 2 THEN PROCtransform(1,0,0,0,-1,0) 
PLOT plotop, x, y 
NEXT point 
ENDPROC 


DEF PROCtransform(a,b,c,d,e,f) 
xt = a¥x + bey + cs yt = d¥x + ery + f 
x = xts y = yt 

ENDPROC 


Program 4.12 Network group 2. 


163 


Art of microcomputer graphics 


164 
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to calcomp plotter 


p [screen dum 


Network group 3 


Figure 4.20 
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MODE O 

type = 1 

FOR xx = 100 TO 900 STEP 200 
FOR yy =250 TO 750 STEP 100 
PROCdrawmotifat(xx, yy) 

NEXT : NEXT 

type = 2 

FOR xx = 120 TO 9SOSTEP 200 
FOR yy =270TO 800 STEP100 
PROCdrawmotifat(xx, yy) 

NEXT: NEXT 

END 


DATA 4,-20,-10,5,+20,-10,5,20,10,5,-20,-10 


DEF PROCdrawmotifat(xx, yy) 
VDU 29,xx;yy; 
RESTORE 
FOR point = 1 T0 4 
READ plotop, x, y 


IF type = 2 THEN PROCtransform(-1,0,0,0,-1,0) 


PLOT plotop, x, y 
NEXT point 
ENDPROC 


DEF PROCtransform(a,b,c,d,e,f) 
xt = axx + bey + c: yt = dex + ery + f 
x = xt: y = yt 

ENDPROC 


Program 4.13 Network group 3. 
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Figure 4.21 
Network group 4 
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10 MODE O 

20 type = 1 

30 FOR xx = 100 TO 900 STEP 400 
40 FOR yy =250 TO 750 STEP 200 
50 PROCdrawmotifat(xx, yy) 

60 NEXT:NEXT 

70 type = 2 

80 FOR xx = 140 TO 940 STEP 400 
90 FOR yy =270 TO 800 STEP 200 
100 PROCdrawmotifat(xx, yy) 

110 NEXT:NEXT 

120 type = 3 

130 FOR xx = 300 TO 900 STEP 400 
140 FOR yy = 350 TO 750 STEP 200 
150 PROCdrawmotifat(xx, yy) 

160 NEXT: NEXT 

170 type = 4 

180 FOR xx = 340 TO 900 STEP 400 
190 FOR yy = 330 TO 770 STEP 200 
200 PROCdrawmotifat(xx, yy) 

210 NEXT: NEXT 

220 END 


230 DATA 4,-20,-10,5,+20,-10,5,20,10,5,-20,-10 


240 DEF PROCdrawmotifat(xx, yy) 

250 VDU 29,xx;yy; 

260 RESTORE 

270 ~=FOR point = 170 4 

280 READ plotop, x, y 

290 IF type = 2 THEN PROCtransform(-1,0,0,0,-1,0) 
300 IF type = 3 THEN PROCtransform(1,0,0,0,-1,0) 
310 IF type = 4 THEN PROCtransform(-1,0,0,0,1,0) 
320 PLOT plotop, x, y 

330 NEXT point 

340 ENDPROC 


350 DEF PROCtransform(a,b,c,d,e,f) 

360 xt = axx + bey + cz: yt = dex + ery + f 
370 x = xt: y = yt 

380 ENDPROC 


Program 4.14 Network group 4. 
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330 
340 


350 
360 
370 
380 


MODE O 

type = 1 

FOR xx = 100 TO 900 STEP 400 
FOR yy =250 TO 750 STEP 200 
PROCdrawmotifat(xx, yy) 

NEXT: NEXT 

type = 2 

FOR xx = 140 TO 940 STEP 400 
FOR yy =270 TO 800 STEP 200 
PROCdrawmotifat(xx, yy) 

NEXT: NEXT 

type = 3 

FOR xx = 300 TO 1100 STEP 400 
FOR yy = 270 TO 750 STEP 200 
PROCdrawmotifat(xx, yy) 

NEXT: NEXT 

type = 4 

FOR xx = 340 TO 1140 STEP 400 
FOR yy = 250 TO 770 STEP 200 
PROCdrawmotifat(xx, yy) 

NEXT: NEXT 


) END 


DATA 4,-20,-10,5,+20,-10,5,20,10,5,-20,-10 


DEF PROCdrawmotifat(xx, yy) 
VDU 29,xx;zyy; 
RESTORE 
FOR point = 1 T0 4 
READ plotop, x, y 
IF type = 2 THEN PROCtransform(-1,0,0,0,-1,0) 
IF type = 3 THEN PROCtransform(1,0,0,0,-1,0) 
IF type = 4 THEN PROCtransform(-1,0,0,0,1,0) 
PLOT plotop, x, y 
NEXT point 
ENDPROC 


DEF PROCtransform(a,b,c,d,e,f) 
xt = akx + bey + c : yt = dex + ery + f 
x = xti y = yt 

ENDPROC 
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Program 4.15 Network group 5. 
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Figure 4.23 
Network group 6 plscreen dump to calcom Lotter 
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10 MODE O 

20 FOR type = 1 TO 2 

30 FOR xx = 100 TO 9O0STEP 200 

40 skew = 0 

50 FOR yy =250 TO 750 STEP 100 

60 IF yy = 350 OR yy = 550 OR yy = 750 THEN skew = 100 
70 PROCdrawmotifat(xxtskew, yy) 

80 skew = 0 

90 NEXT: NEXT: NEXT 

100 END 


110 DATA 4,-20,-10,5,+20,-10,5,20,10,5,-20,-10 


120 DEF PROCdrawmotifat(xx, yy) 

130 VDU 29,xx;yy; 

140 RESTORE 

150 FOR point = 1 T0 4 

160 READ plotop, x, y 

170 IF type = 2 THEN PROCtransform(1,0,0,0,-1,-20) 
180 PLOT plotop, x, y 

190 NEXT point 

200 ENDPROC 


210 DEF PROCtransform(a,b,c,d,e,f) 

220 xt = a*x + b¥y + cs yt = d*x + exy + f 
230 x = xt: y = yt 

240 ENDPROC 


Program 4.16 Network group 6. 


Art of microcomputer graphics 


172 


Lotter 


to calcorn 


a (screen dum 


to calcom 


p [screen dum 


Network group 7 


Figure 4.24 
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160 
170 


180 
190 
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210 


MODE 0 
FOR type = 1 TO 2 
FOR xx = 100 TO 9OOSTEP 200 
FOR yy =250 TO 750 STEP 100 
PROCdrawmotifat(xx, yy) 
NEXT: NEXT: NEXT 
END 


DATA 4,-20,-10,5,+20,-10,5,20,10,5,-20,-10 


DEF PROCdrawmotifat(xx, yy) 
VDU 29,xx;¥y; 
RESTORE 
FOR point = 1 TO 4 
READ plotop, x, y 
IF type = 2 THEN PROCtransform(1,0,0,0,-1,-20) 
PLOT plotop, x, y 
NEXT point 
ENDPROC 


DEF PROCtransform(a,b,c,d,e,f) 
xt = axx + bey + c: yt = d*x + exy + f 
xX = xt: y = yt 

ENDPROC 
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Figure 4.25 
Network moun plscreen dump to calcom Lotter 


Two-dimensional ornamentation 


10 MODE 0 

20 FOR type = 1 T0 4 

30 FOR xx = 100 TO 9OOSTEP 200 

40 skew = 0 

50 FOR yy =250 TO 750 STEP 100 

60 IF yy = 350 OR yy = 550 OR yy = 750 THEN skew = 100 
70 PROCdrawmotifat(xx+skew, yy) 

80 skew = 0 

90 NEXT: NEXT: NEXT 

100 END 


110 DATA 4,-20,-10,5,+20,-10,5,20,10,5,-20,-10 


120 DEF PROCdrawmotifat(xx, yy) 

130 VDU 29,xx;yy; 

140 RESTORE 

150 FOR point = 1 TO 4 

160 READ plotop, x, y 

170 IF type = 2 THEN PROCtransform(1,0,0,0,-1,-20) 
180 IF type = 3 THEN PROCtransform(-1,0,40,0,1,0) 
190 IF type = 4 THEN PROCtransform(-1,0,40,0,-1,-20) 
200 PLOT plotop, x, y 

210 NEXT point 

220 ENDPROC 


230 DEF PROCtransform(a,b,c,d,e,f) 

240 «xt = axx + b¥y + cr yt = d*x + exy + f 
250 x = xt: y = yt 

260 ENDPROC 
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Two-dimensional ornamentation 


MODE O 
FOR type = 1 TO 2 
FOR xx = 200 TO 1000 STEP 200 
FOR yy =250 TO 750 STEP 100 
PROCdrawmotifat(xx, yy) 
NEXT: NEXT: NEXT 
FOR type = 3 TO 4 
FOR xx = 150 TO 950 STEP 200 
FOR yy =250 TO 750 STEP 100 
PROCdrawmotifat(xx, yy) 
NEXT: NEXT: NEXT 
END 


DATA 4,-20,-10,5,+20,-10,5,20,10,5,-20,-10 


DEF PROCdrawmotifat(xx, yy) 
VDU 29,xx;yy; 
RESTORE 
FOR point = 1 TO 4 
READ plotop, x, y 
IF type = 2 THEN PROCtransform(1,0,0,0,-1,-30) 
IF type = 3 THEN PROCtransform(-1,0,0,0,1,0) 
IF type = 4 THEN PROCtransform(-1,0,0,0,-1,-30) 
PLOT plotop, x, y 
NEXT point 
ENDPROC 


DEF PROCtransform(a,b,c,d,e,f) 
xt = axx + bey + c: yt = d*x + ery + f 
x = xt: y = yt 

ENDPROC 
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Figure 4.27 
Network efoap.i0 piscreen dump to calcomp plotter 


Two-dimensional ornamentation 


10 MODE 0 
20 FOR type = 1 T0 4 
30 FOR xx = 100 TO 900 STEP 200 
40 FOR yy =250 TO 750 STEP 130 
50 PROCdrawmotifat(xx, yy) 
60 NEXT yy 
70 NEXT xx 
80 NEXT type 
END 


100 DATA 4,-20,-10,5,+20,-10,5,20,10,5,-20,-10 


110 DEF PROCdrawmotifat(xx, yy) 

120. =VDU 29,xx;yy; 

130 RESTORE 

140 FOR point = 1 TO 4 

150 READ plotop, x, y 

160 IF type = 2 THEN PROCtransform(-1,0,-50,0,-1,-20) 
170 IF type = 3 THEN PROCtransform(0,1,-10,-1,0,-40) 
180 IF type = 4 THEN PROCtransform(0,-1,-40,1,0,20) 
190 PLOT plotop, x, y 

200 NEXT point 

210 ENDPROC 


220 DEF PROCtransform(a,b,c,d,e,f) 

230 xt = a*x + bey + cs yt = d¥x + exy + f 
240 x = xt: y= yt 

250 ENDPROC 
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10 MODE O 

20 FOR type = 1 TO 4 

30 FOR xx = 100 TO 900 STEP 400 
40 FOR yy =250TO 750 STEP 260 
50 PROCdrawmotifat(xx, yy) 
60 NEXT yy 

70 NEXT xx 

80 NEXT type 

90 FOR type = 5 TO 8 

100 FOR xx = 300 TO 900 STEP 400 
110 FOR yy =380T0 750 STEP 260 
120 PROCdrawmotifat(xx, yy) 
130 NEXT yy 

140 NEXT xx 

150 NEXT type 

160 END 


170 DATA 4,-20,-10,5,+20,-10,5,20,10,5,-20,-10 


180 DEF PROCdrawmotifat(xx, yy) 

190 VDU 29,xx;yy; 

200 RESTORE 

210 FOR point = 1 T0 4 

220 READ plotop, x, y 

230 IF type = 1 THEN PROCtransform(1,0,0,0,1,,10) 

240 IF type THEN PROCtransform(-1,0,-50,0,-1,-20) 
250 IF type THEN PROCtransform(0,1,-10,-1,0,-40) 
260 If type THEN PROCtransform(0,-1,-40,1,0,20) 
270 IF type THEN PROCtransform(-1,0,-50,0,1,10) 
280 IF type THEN PROCtransform(0,-1,-40,-1,0,-40) 
290 IF type THEN PROCtransform(0,1,-10,1,0,20) 
300 IF type = 8 THEN PROCtransform(1,0,0,0,-1,-20) 
310 PLOT plotop, x, y 

320 NEXT point 

330 ENDPROC 


340 DEF PROCtransform(a,b,c,d,e,f) 

350 xt = axx + bey + cz: yt = dex + exy + f 
360 x = xt: y = yt 

370 ENDPROC 


CONAUEWN = 
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Two-dimensional ornamentation 


MODE 0 

FOR type = 1 TO 8 

FOR xx = 100 TO 900 STEP 200 
FOR yy =250T0 750 STEP 130 

PROCdrawmotifat(xx, yy) 

NEXT yy 

NEXT xx 

NEXT type 

END 


DATA 4,-20,-10,5,+20,-10,5,20,10,5,-20,-10 
DEF PROCdrawmotifat(xx, yy) 


VDU 29,xx;zyy; 
RESTORE 
FOR point = 1 T0 4 
READ plotop, x, y 
IF type = 1 THEN PROCtransform(1,0,0,0,1,10) 
IF type = 2 THEN PROCtransform(-1,0,-50,0,-1,-20) 
IF type = 3 THEN PROCtransform(0,1,-10,-1,0,-40) 
IF type = 4 THEN PROCtransform(0,-1,-40,1,0,20) 
IF type = 6 THEN PROCtransform(0,-1,~40,-1,0,-40) 
IF type = 8 THEN PROCtransform(1,0,0,0,-1,-20) 
PLOT plotop, x, y 
NEXT point 
ENDPROC 
DEF PROCtransform(a,b,c,d,e,f) 
xt = a*x + b*y + cs yt = d¥x + exy + f 
xX = xt: y = yt 
ENDPROC 
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Figure 4.30 
Network group 13 
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10 MODE O 
20 FOR type = 1 TO 3 
30 FOR yy =250 TO 750 STEP 120 


40 skew = 0 

50 IF yy = 370 OR yy = 610 THEN skew = 60 
60 FOR xx = 100 TO 700 STEP 120 

70 PROCdrawmoti fat (xx+skew,yy) 

80 NEXT: NEXT: NEXT 

90 END 


100 DATA 4,5,5,5,39.64,5,5,39.64,25,5,5,5 


110 DEF PROCdrawmotifat(xx, yy) 
120 VDU 29,xx;yy; 

130 RESTORE 

140 FOR point = 1 TO 4 


150 READ plotop, x, y 
170 IF type = 1 THEN PROCtransform(1,0,0,0,-1,0) 
180 IF type = 2 THEN PROCtransform(~.5,~.866,0,-.866,0.5,0) 


190 IF type = 3 THEN PROCtransform(-.5,.866,0,.866,0.5,0) 
220 PLOT plotop, x, y 

230 NEXT point 

240 ENDPROC 


250 DEF PROCtransform(a,b,c,d,e,f) 

260 xt = axx + bey + cr: yt = d*x + exy + f 
270 x= xt: y= yt 

280 ENDPROC 
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Two-dimensional ornamentation 


MODE O 
FOR type = 1 10 6 
FOR yy =250 TO 750 STEP 120 
skew = 0 
IF yy = 370 OR yy = 610 THEN skew = 60 
FOR xx = 100 TO 700 STEP 120 
PROCdrawmoti fat (xxt+skew,yy) 
NEXT: NEXT: NEXT 
END 


DATA 4,5,5,5,39.64,5,5,39 .64,25,5,5,5 


DEF PROCdrawmotifat(xx, yy) 
VDU 29,xx;yy; 


RESTORE 
FOR point = 1 TO 4 
READ plotop, x, y 
IF type = 1 THEN PROCtransform(1,0,0,0,1,0) 
IF type = 2 THEN PROCtransform(1,0,0,0,-1,0) 
IF type = 3 THEN PROCtransform(-.5,-.866,0,.866,-0.5,0) 
IF type = 4 THEN PROCtransform(-.5,.866,0,-.866,-0.5,0) 
IF type = 5 THEN PROCtransform(-.5,-.866,0,-.866,0.5,0) 
IF type = 6 THEN PROCtransform(-.5,.866,0,.866,0.5,0) 
PLOT plotop, x, y 
NEXT point 
ENDPROC 
DEF PROCtransform(a,b,c,d,e,f) 


xt = akx + bey + c: yt = d*x + ery + f 
x = xt: y = yt 
ENDPROC 
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10 MODE 0 

20 FOR type = 1 TO 6 

30 FOR yy = 250 TO 610 STEP 90 

40 skew = 0 

50 IF yy = 340 OR yy = 520 THEN skew = 50 
60 FOR xx = 100 TO 700 STEP 100 

70 PROCdrawmoti fat (xx+skew,yy) 

80 NEXT: NEXT: NEXT 

90 END 


100 DATA 4,5,5,5,39.64,5,5,39.64,25,5,5,5 


110 DEF PROCdrawmotifat(xx, yy) 

120 =VDU 29,xx;zyy;3 

130 RESTORE 

140 FOR point = 1 TO 4 

150 READ plotop, x, y 

160 IF type = 1 THEN PROCtransform(0,1,0,-1,0,0) 

170 IF type = 2 THEN PROCtransform(0,-1,0,-1,0,0) 

180 IF type = 3 THEN PROCtransform(.866,-.5,0,.5,.866,0) 
190 IF type = 4 THEN PROCtransform(.866,.5,0,.5,-.866,0) 
200 IF type = 5 THEN PROCtransform(-.866,-.5,0,.5,-.866,0) 
220 PLOT plotop, x, y 

230 = NEXT point 

240 ENDPROC 


250 DEF PROCtransform(a,b,c,d,e,f) 

260 xt = akex + bey + cs yt = dex + exy + f 
270 x=xt: ye yt 

280 ENDPROC 
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Two-dimensional ornamentation 


10 MODE 0 

20 FOR type = 1 TO 6 

30 FOR yy =250 TO 850STEP 120 

40 skew = 0 

50 IF yy = 370 OR yy =610 OR yy = 850THEN skew =206 

60 FOR xx = 100 TO 1000 STEP 412 

70 PROCdrawmoti fat (xx+skew,yy) 

80 NEXT: NEXT: NEXT 

90 END 

100 DATA 4,16,-4,5,64,-4,5,64,-32,5,16,-4 

110 DEF PROCdrawmotifat(xx, yy) 

120 VDU 29,xx;yy; 

130 RESTORE 

140 FOR point = 1704 

150 READ plotop, x, y 

170 IF type = 1 THEN PROCtransform(1,0,0,0,1,0) 

180 IF type = 2 THEN PROCtransform(.5,-.866,0,.866,0.5,0) 
190 IF type = 3 THEN PROCtransform(-.5,-.866,0,.866,-0.5,0) 
191 IF type = 4 THEN PROCtransform(-1,0,0,0,-1,0) 

192 IF type = 5 THEN PROCtransform(-.5,.866,0,-.866,-0.5,0) 
193 IF type = 6 THEN PROCtransform(.5,.866,0,-.866,0.5,0) 
220 PLOT plotop, x, y 

230 =NEXT point 

240 ENDPROC 

250 DEF PROCtransform(a,b,c,d,e,f) 

260 xt = axx + bey + ci yt = d&x + exy + f 

270 x = xt: y= yt 

280 ENDPROC 
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10 MODE 0 

20 FOR type = 1 TO 12 

30 FOR yy =250 TO 850STEP 240 

40 skew = 0 

50 IF yy = 490 THEN skew =150 

60 FOR xx = 100 TO 1000 STEP 300 
70 PROCdrawmoti fat (xx+skew,yy) 


80 NEXT: NEXT: NEXT 


90 END 


100 DATA 4,24,-6,5,96,-6,5 ,96,-42,5,24,-6 


110 DEF PROCdrawmotifat(xx, yy) 
120 VDU 29,xx;yy; 


130 RESTORE 

140 FOR point 
150 READ pl 
160 IF type 
170 IF type 
180 IF type 
190 IF type 
200 IF type 
210 IF type 
220 IF type 
230 IF type 
240 IF type 
250 IF type 
260 IF type 
270 IF type 


290 NEXT poin 
300 ENDPROC 


° 


t 


top, 


1704 
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X, Y 


PROCtransform(1,0,0,0,1,0) 
PROCtransform(1,0,0,0,-1,0) 
PROCtransform(.5,-.866,0,.866,0.5,0) 
PROCtransform(.5,.866,0,.866,-0.5,0) 
PROCtransform(-.5,-.866,0,.866,-0.5,0) 
PROCtransform(-.5,.866,0,.866,.5,0) 
PROCtransform(-1,0,0,0,-1,0) 
PROCtransform(-1,0,0,0,1,0) 
PROCtransform(-.5,.866,0,-.866,-0.5,0) 


10 THEN PROCtransform(-.5,-.866,0,-.866,.5,0) 
11 THEN PROCtransform(.5,.866,0,-.866,.5,0) 

12 THEN PROCtransform(0.5,-.866,0,-.866,-.5,0) 
280 PLOT plotop, x, y 


310 DEF PROCtransform(a,b,c,d,e,f) 
320 3=xt = axx + bey + cs yt = dex + exy + f 
330 x = xt: y= yt 


340 ENDPROC 
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Network group 15 
In network group 15, which also contains 120° rotation symmetry, 
all the rotational centres lie on lines of reflection. The differences 
between group 14 and group 15 are perhaps best seen by comparing 
the respective lattices (Figure 4.31b and Figure 4.32b). The triangu- 
lar motifs from these two groups seem to be more difficult to 
interpret — perhaps because we are unfamiliar with 120° patterns. 
The hexagonal lattice in Figure 4.32b, drawn by Program 4.25, is 
made up of smal: hexagons. 120° radial lines are drawn within each 
hexagon. Note the orientation of these Y shapes and how they 
combine to form larger hexagons. 


Network group 16 

Network groups 16 and 17 are the two groups with 60° rotational 
symmetry centres. Network group 16, drawn by Program 4.26, does 
not contain any lines of symmetry and like group 13, the triangular 
motifs, of which there are now six instead of three impart a feeling of 
rotation. This is also conveyed by Figure 4.33b which is generated 
by placing a pair of concentric circles at each rotational symmetry 
centre. Added to this is a hexagon with eccentrically extending 
sides. This was based on the design in Figure 4.33c, a Persian 
example from Jones. 


Network group 17 

Finally we come to network group 17. This possesses 60° rotational 
symmetry centres and lines of reflection. We have used 12 triangles 
in Figure 4.34a for comparison with Figure 4.33a. Strictly only six 
isosceles triangles are required. 

The computer example in Figure 4.34b is interesting. Itwas drawn 
using Program 4.27, is based ona Chinese lattice and the impression 
is of stacked cubes. The pattern is generated, however, from six 
radial lines drawn at 60° intervals. The example from Jones is 
Chinese. 


Summary of network pattern symmetry 

We can summarize the symmetry of network groups by using a 
decision tree (Figure 4.35), just as we did for the band groups. This 
time we start by asking the question: ‘Is there axial symmetry, and, 
if there is, what is the smallest elementary angle?’ The second 
question determines whether there are any reflection lines. At the 
third level we have to determine whether there are reflections in 
more than one direction, whether there are glide reflections and 
whether the glide reflection axes correspond with the reflection 
lines. 

Network groups are rather more difficult to categorise than bands 
but everyday examples of them are far more common. Network 
patterns abound in wallpapers, fabrics and ornamentation of every 
description. 
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Axial symmetry 


None 180° 90° 120° 60° 


Lines of Lines of Lines of Lines of Lines of 


reflection ? reflection? refiection ? reflection? reflection ? 


No Yes No Yes Yes Yes 


Reflections Reflections 
in2 in4 
directions ? directions ? 


All glide reflection 


lines coincide with 
symmetry lines? 


Glide Glide - 
Reflection? reflection ? Axial centres Axial centres 
on reflection on reflection 


fines ? lines ? 


No |Yes |No |Yes |No jYes |No No Yes Yes No Yes Yes 


Figure 4.35 
Decision tree for 17 network 


groups 
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5 Night and day — a journey 
through the world of 
tesselations 


People have always been fascinated by shapes or tiles that fit 
together to cover a plane surface leaving no gaps. Such ‘tesselations’ 
come in many different forms. 

In Chapter 4, we dealt with the programming required to place a 
motif at certain positions in a plane. Some of these motifs happened 
to tesselate the plane. Mathematically there is no difference be- 
tween the symmetry groupings of network patterns that do not 
tesselate and those that do. However, the programming requires a 
completely different approach and the two topics are separated into 
different chapters. 

Among the simplest tesselations are those by regular polygons. 
Figure 5.1 shows a selection of ways of tiling the plane with regular 
polygons. The tesselations in Figure 5.1 all share an interesting 
property. In each pattern, every vertex is surrounded by the same 
combination of shapes in the same order. In fact the 11 tesselations 
of Figure 5.1 are the only ones that have this property. Only three of 
these tilings use repeated copies of a single tile and the rest require 
the use of two or more different tiles. 

Any single equilateral triangle can be used to tesselate the plane, 
as can any square or any regular hexagon. Equilateral triangles, 
squares and regular hexagons are the only shapes that can be used 
in this way. The plane can not be tesselated by regular pentagons, 
but there are a number of irregular pentagons that will tesselate the 
plane. An example of a pentagon that will tesselate is the well- 
known Cairo tile, so-called because many of the streets of Cairo 
were paved in this pattern (Figure 5.2). The Cairo tile is equilateral 
but not regular because its angles are not all the same. 

The fascination that is aroused by finding a single shape that will 
tile the plane is well exemplified by the feverish activity that is 
stimulated amongst amateur mathematicians by articles on the sub- 
ject. For example, an article in Martin Gardner’s column in Scientific 
American in 1975 discussed the problem of classifying the types of 
pentagon that would tesselate the plane. This article stimulated a 
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Figure 5.1 

Tesselation of the plane witt 
regular polygons 

number of amateur mathematicians into generating descriptions of 

previously unknown pentagonal shapes that could be used in such 

tilings. 

The work of M. C. Escher is well known in this area. Many of his 
Se. ey, Sy Figure 5.2 


The Cairo tile: an equilateral 
pentagon that tesselates 
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Figure 5.3 

Traditional patchwork 
patterns: (a) world without 
end; (b) clay’s choice; (c) 
falling star; (d) Virginian star 


pictures involved tilings of the plane with shapes that resembled 
animals and birds. In some of his works, a single shape was used 
whereas in others, a combination of shapes was used. One well- 
known picture involves a group of twelve different bird shapes that 
can be repeated to tesselate. 

Many traditional decorations and crafts involve tesselations. A 
common example is in the design of patchwork patterns where 
pieces of fabric are sewn together to create attractive patterns. There 
are many traditional designs and some of these are illustrated in 
Figure 5.3. The patterns illustrated are used as single motifs on 
cushions, or they can be extended for use on larger objects such as 
bedspreads. 

Tesselations are also widely used in floor and wall decorations. A 
famous example of this appears in the Alhambra in Spain where 
Escher himself spent some time studying the Moorish tesselations. 

In this chapter, we will look at two main ways in which a 
microcomputer can be used in exploring the world of tesselations. 


First of all, we shall see how the technique of ‘picking and dragging’ 
introduced in Chapter 2 can be used in a program for designing and 
experimenting with tesselation layouts. Our second main topic will 
be a study of ways in which simple tile shapes can be deformed into 
shapes that are more interesting, but which still tesselate the plane. 
Programming techniques for decorating the shapes that are gener- 
ated will also be introduced. For examples of the sort of display that 
can be designed, look ahead to Figures 5.11 and 5.14. 


5.1 AN INTRODUCTORY TESSELATION LAYOUT PLANNER 


Program 5.1 is a simple picking and dragging program that can be 
used to design tesselation layouts. The basic shapes used are de- 
scribed to the program in DATA statements that contain a sequence 
of relative coordinates for each shape available. (Actually, one of the 
increment pairs is not yet used, but will be needed later.) The first 
line of DATA gives the number of different shapes in the set being 
used, a string containing the characters that will be used in the 
program as codes for selecting shapes, and the numbers of the lines 
that contain the DATA for the individual shapes. Redefining the 
DATA statements allows the user to experiment with different 
combinations of basic shapes. Program 5.1 includes the DATA for 
an equilateral triangle and a hexagon. DATA statements describing 
some other combinations of shapes appear as Program 5.2. 

The program is similar to the picking and dragging program 
described in Chapter 2, but includes as an additional option rotation 
of objects (command letter ‘C’ for Clockwise and ‘A’ for Anti- 
clockwise). The method used for doing this was suggested in Chap- 
ter 2. Rotations are done in increments that are appropriate for the 
shapes being used. For example, when tesselations are being plan- 
ned with equilateral triangles and hexagons, an appropriate rota- 
tion step is 60°. This is included at the start of the data for these two 
shapes. 

The patchwork tesselations in Figure 5.3 were in fact produced by 
using Program 5.1. 


Colour filling tiles 
Provided each tile is a ‘convex’ shape, a tile can be easily broken up 
into a set of triangles for colour fill. (A convex shape is one that 
‘bulges outwards’ everywhere and has no ‘bays’.) A simple break- 
down of a convex shape into triangles is illustrated in Figure 5.4. 
A colour fill option that can be switched on or off can be included 
in Program 5.1 by making the alterations and extensions indicated 
in Program 5.3. When the colour fill option is on, the user is asked 
for a colour code to be used when a tile is fixed. Instead of drawing 
round the outline of the tile, the sequence of triangle fill operations 
suggested by Figure 5.4 is used. (Later in this chapter, an algorithm 
for finding a sequence of triangle fill operations for a non-convex 
shape is introduced.) 
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10 MODE 1: xstep=4 : ystep=4 

20 maxshapes=5 : maxpts=10 

30 DIM movex(maxpts), movey(maxpts), reslab(maxshapes) 

40 VDU 29, 640; 512; 

50 PROCinitialise 

60 REPEAT : PROCpick('''') =: UNTIL INSTR(shapes$,selections) 
70 REPEAT 

80 ¥*FX 11,10 


90 «FX 12,1 

100 c$=GETS: f ixed=FALSE 
110 REPEAT 

120 PROCprocesscommand 


130 UNTIL fixed 

140 *FX 12,0 

150 REPEAT : PROCpick("Q") : UNTIL INSTR(shapes$+"Q",selection$) 
160 UNTIL selection$="Q" 

170 *FX 4,0 

180 MODE 7 

190 END 


200 DEF PROCinitialise 
CLS 


220 READ shapes,shapes$ 

230 FOR s=1 TO shapes:READ reslab(s) :NEXT 

240 READ thetainc 

250 = sininc=SINCRAD(thetainc)) :cosinc=COSC(RAD(thetainc)) 
260 GCOL 3,3 

270 = * FX 4,1 

280 = Lef tS$=CHR$136 : right$=CHR$137 

290 = up$ =CHR$139 : down$S =CHR$138 

300 § dragcomms$=Lleft$+right$+tup$+downSt" CAF" 

310 ENDPROC 


320 DEF PROCpick(extracomms$) 
330 PRINT TAB(O,0)"Next selection ("shapes$t+extracomms$")"; 
340 selection$ = GETS 
350 IF INSTR(shapes$textracomms$,selection$)=0 
THEN VDU7 =: ENDPROC 
360 IF selection$="Q" THEN ENDPROC 
370 = PROCget ti Le(selection$) 
380 PRINT TAB(O,0) SPCC(30) 
390 ENDPROC 


400 DEF PROCprocesscommand 

410 LOCAL coms,nc$ 

420 IF INSTRCdragcomms$, c$) = 0 THEN VDU7:c$=GETS:ENDPROC 
430 PROCcountcoms 

440 PROCdraworde Lete 

450 IF cS="F" THEN PROCTix:fixed=TRUE: ENDPROC 

460 IF c$ = left$S THEN x=x-xstep*coms 

470 ~—s IF c$ = right$ THEN x=x+xstep*coms 


Program 5.1 A tesselation layout planning program that uses ‘picking and dragging’ to place tiles. 
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IF c$ 
IF c$ 


upS THEN y=y+ystep*coms 

down$ THEN y=y-ystep*coms 
IF c$ = "C" THEN PROCrotate(-sininc,cosinc) 
IF cS = “A THEN PROCrotate(sininc,cosinc) 
PROCdrawordelete 
c$=GETS 

ENDPROC 


DEF PROCcountcoms 

coms=0 

REPEAT: coms=coms+1:ncS=INKEY$(11) :UNTIL nc$<>c$ 
ENDPROC 


DEF PROCdrawordelete 
LOCAL i 
MOVE x,y : Nx=x : ny=y 
FOR i=1 TO points-1 
nx=nxtmovex(i) : ny=ny+movey(i) 
DRAW nx,ny 
NEXT i 
DRAW x,y 
ENDPROC 


DEF PROCgettile(s$) 
PROCreadtile(s$) 
x=0 : y = -250 
PROCdrawordeLlete 

ENDPROC 


DEF PROCreadti le(s$) 
LOCAL i 
RESTORE reslabCINSTR(shapes$,s$)) 
READ points:FOR i=0 TO points~1 
READ movex(i) ,movey(i) : REM movex(0), movey(0) not used 
yet. 
movex (i) =movex (i) 
movey (7) =movey (i) 
NEXT i 
ENDPROC 


DEF PROCrotate(sin,cos) 
LOCAL x,y,i 
FOR i=0 TO points-1 
x=movex(i) sy=movey (i) 
movex(i)=x*cos-y*sin 
movey(1)=x*sinty*cos 
NEXT 
ENDPROC 


DEF PROCTix 
GCOL 0,3:PROCdrawordelete 
GCOL 3,3 
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930 ENDPROC 


4995 REM DATA for Hexagon) and Triangle) 

5000 DATA 2,HT, 5010,5020, 60 

5010 DATA 6, ~86.6025404,50, 0,100, 86.6025404,50, 
86.6025404,-50, 0,-100, -86.6025404,-50 

5020 DATA 3, -86.6025404,-50, 0,100, 86.6025404,-50 


Program 5.1 continued 


Accurate alignment of tiles 

If you experiment with Program 5.1, you will find that as you build 
up a complex pattern, rounding errors and slight misalignments of 
the tiles will accumulate and become more and more noticeable. 
This is because it is impossible for the user of the program to 
accurately align new tiles with the shapes already included in the 
pattern. Firstly, it is difficult to see when two lines are accurately 
superimposed. Secondly, dragging a tile proceeds in discreet steps 
and the coordinates of most of the vertices of previously placed tiles 
will not necessarily match the possible start points of the tile being 
dragged. 

The solution to this problem is to maintain a list of the existing 
vertices or corners in the pattern created so far. When a new tile has 
been dragged into its approximate position, the command to fix it is 
given. Instead of simply drawing the tile in the position to which it 
has been dragged, the program should first examine each of the 


4995 REM DATA for S(quare), DCiamond) and TCriangle) for ‘World 


without end' pattern. 


5000 DATA 3,SDT, 5010,5020,5030,45 

5010 DATA 4, -100,0, 0,100, 100,0, 0,-100 

5020 DATA 4, -50,-120.710678, -50,120.710678, 
50,120.710678, 50,-120.710678 

5030 DATA 3, -100,0, 50,120.710678, 50,-120.710678 


4995 REM DATA for S(quare), RChombus) and T(riangle) for 'Clay's 


choice' pattern. 


5000 DATA 3,SRT, 5010,5020,5030,45 
5010 DATA 4, -100,0, 0,100, 100,0, 0,-100 
5020 DATA 4, -100,0, 100,100, 100,0, -100,-100 


5030 DATA 3, -100,0, 100 


, 100, 0,-100 


4995 REM DATA for S(quare), DCiamond) and TC(riangle) for 'Falling 


Star' pattern. 


5000 DATA 3,S0T, 5010,5020,5030,45 

5010 DATA 4, -100,0, 0,100, 100,0, 0,-100 

5020 DATA 4, 70.7106781,-70.7106781, -100,0, 
-70.7106781,70.7106781, 100,0 

5030 DATA 3, -100,0, 100,100, 0,-100 


Program 5.2 Alternative DATA sets for Program 5.1. 


Figure 5.4 
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A simple triangle fill sequence 
that will work for any convex 


polygon 
tile’s vertices in turn. If a vertex is found that is ‘close’ to a vertex in 
the existing pattern, then the vertex in the existing pattern is used as 
the start point for drawing the new tile. While the tile is being 
drawn, any other vertex that is close to an existing vertex in the 
pattern is also replaced by the existing vertex. As the tile is being 


60 REPEAT : PROCpick("C'") : UNTIL INSTR(shapes$,selection$) 
150 REPEAT : PROCpick("QC") : UNTIL INSTR(shapes$+"Q",selection$) 
255 colouring = FALSE 


365 IF selection$=""(" THEN 
colouring=NOT colouring : REM C for Colour. 
370 IF INSTR(shapes$,selection$) THEN PROCgettile(selection$) 


900 DEF PROCfix 
910 LOCAL selection$,nx,ny 
920 IF NOT colouring THEN 
GCOL 0,3 : PROCdrawordelete : GCOL 3,3 : ENDPROC 
930 PROCchoosecolour ("RYW") 
940 GCOL 0,INSTRC"RYW",colour$) 
950 nx = xtmovex(1) : ny = yt+tmovey(1) : MOVE nx,ny 
960 FOR i=2 TO points-1 


970 nx=nxtmovex(i) : ny=ny+movey(i) 
980 MOVE x,y : PLOT 85, nx,ny 
990 NEXT 


1000 GCOL 3,3 
1010 ENDPROC 


1020 DEF PROCchoosecolour(codes$) 

1030 PRINT TABC(O,0)"'Choose colour (";codes$;")"; 
1040 REPEAT :colour$=GETS$ 

1050 IF INSTR(codes$,colour$)=0 THEN VDU7 

1060 UNTIL INSTR(codes$,colour$) 

1070 ENDPROC 


Program 5.3 Alterations to Program 5.1 to enable tiles to be coloured. 
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Figure 5.5 

Two periodic and two non- 
periodic tilings of an isosceles 
triangle 


drawn, new vertices are added to the overall list of vertices. This will 
ensure that the vertices of any new tiles added to a pattern will 
exactly match the corresponding vertices of tiles that have already 
been placed. The alterations needed to implement this extension are 
presented as Program 5.4. 

Another useful facility in a design program of this nature would 
be the ability to save designs on tape or disc files. Implementation of 
a save facility in a picking and dragging program was discussed in 
Chapter 2 and we leave this as an exercise for the interested reader. 


5.2 NON-PERIODIC TESSELATIONS 


Many of the best-known tesselations are ‘periodic’. This means that 
there is a grouping of tiles that are repeated again and again over the 
plane. If you can imagine the tiles in a periodic tesselation being 
outlined on an infinite piece of tracing paper, then the paper can 
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35 maxverts=100 
36 DIM vx(maxverts), vy(maxverts) 


255 noofverts = 0 


640 PROCround(nx,ny) : DRAW ax,ay 


900 DEF PROCfix 

910 GCOL 0,3 : PROCfixdraw 
920 GCOL 3,3 

930 ENDPROC 


940 DEF PROCfixdraw 
950 LOCAL i,s,nx,ny,found 
960 i=0:nx=x:ny=y 


970 REPEAT 

980 i1=(1+1)MO0D points 

990 nx=nx+movex (i) sny=ny+movey(i) 
1000 PROCcheckverts 


1010 UNTIL found OR i=0 

1020 PROCround(nx,ny) : MOVE ax,ay : s=i 
1030 REPEAT i=(€1+1)M0D points 

1040 nx=nx+movex (7) sny=ny+movey (i) 
1050 PROCcheckverts 

1060 IF NOT found THEN PROCadd 

1070 IF i=0 THEN x=nx:y=ny 

1080 PROCround(nx,ny) : DRAW ax,ay 
1090 UNTIL i=s 

1100 ENDPROC 


1110 DEF PROCcheckverts 

1120 LOCAL j,e 

1130 IF noofverts=0 THEN found=FALSE:ENDPROC 
1140 e=30 

1150 = j=0 

1160 REPEAT 

1170 j=jtt 

1180 found=ABS(vx(j)-nx)<e AND ABS(vy(j)-ny)<e 
1190 UNTIL found OR j=noofverts 

1200 IF found THEN nx=vx(j) sny=vy(j) 

1210 ENDPROC 


1220 DEF PROCadd 


1230 noofverts=noofverts+1:vx(noofverts)=nx: vy (noofverts)=ny 
1240 ENDPROC 


1250 DEF PROCround(nx,ny) 

1260 IF nx-INT(nx)>.9 THEN ax=INT(nx+.5) ELSE ax=nx 
1270 IF ny-INT(ny)>.9 THEN ay=INTC(ny+.5) ELSE ay=ny 
1280 ENDPROC 


Program 5.4 Extensions to Program 5.1 to align tiles accurately. 
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Figure 5.6 

A triomino as a replicating tile 
or reptile (three generations) 
and a non-periodic tesselation 
of the screen 


always be moved, without rotation, into a new position where the 
outlines will again fit exactly. The structure of any periodic tiling 
matches the structure of one of the wallpaper or frieze patterns 
described in Chapter 4. 

Many shapes that tile periodically will also tile non-periodically. 
For example, Figure 5.5 shows two periodic tilings and two non- 
periodic tilings using an isosceles triangle. (Although the circular 
and spiral patterns in Figure 5.5 are non-periodic, they are ob- 
viously highly regular.) 

The photographs in Figure 5.5 could have been produced by 
picking and dragging (Program 5.1) or by inserting the triangle 
plotting instructions in simple loops with an appropriate rotation 
factor built in. 


Reptiles 
An interesting family of tiles, many of which give rise to non- 
periodic tilings are the so-called ‘reptiles’. These are tiles that can be 


Tesselation 207 


grouped into larger replicas of themselves. These replicas, in turn, 
can be grouped into still larger replicas, and so on. 

Figure 5.6 shows how a simple right-angled ‘triomino’ can act asa 
reptile. The figure shows three generations of replication, together 
with an extension of this to a complete tesselation of the screen. 

Another well-known reptile is the ‘sphinx’ illustrated in Figure 
57, 

A presentation of the programs used to generate these patterns is 
delayed until Chapter 6 where we discuss the use of recursion in 
computer graphics. 


Tesselations with Penrose kites and darts 

All known examples of single tiles that tesselate in a non-periodic 

fashion will also tesselate periodically. However, it is possible to Figure 5.7 

construct sets of two or more tiles that tesselate only in a non- The sphinx tile as a reptile 
periodic fashion. Finding such sets of tiles is by no means an easy _ (three generations) and a non- 
problem. Until a few years ago, it was believed that no such set __ periodic tesselation of the 
existed. screen 


SO NIEREINIS 
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Figure 5.8 
Decomposition of a rhombus 
into a Penrose kite and dart 


By far the most interesting and entertaining tiles in this family are 
the pair of tiles known as the ‘kite’ and the ‘dart’. These were first 
described by the renowned mathematician, Professor Roger 
Penrose. The two tiles are constructed by cutting a ‘rhombus’ in two 
as illustrated in Figure 5.8. If a kite and a dart were rejoined into a 
rhombus then that combination of the tiles easily gives rise to a 
periodic tesselation. However, we forbid this way of joining the tiles 
as well as any others that could give rise to a periodic tesselation. 
The rules are very simple. Permitted joins can be indicated by 
adding protuberances and matching holes on the pairs of edges that 
are allowed to meet (see the first two photographs in Figure 5.9). 
Alternatively, permitted joins can be indicated by labelling the 
corners of the tiles in such a way that only corners with the same 
label are allowed to meet (Figure 5.10a). 

A rather more attractive method that has been suggested is to 
draw two arcs on each tile, in two different colours. The arcs can be 
positioned such that, for each permitted joining of two tiles, two 
arcs of the same colour meet at the common edge (Figure 5.10b). Ina 
tesselation where the tiles are marked in this way, these arcs join 
together to produce coloured circles and curves that add to the 
beauty of the pattern. (See the second pair of photographs in Figure 
5.9 and Colour Plate 16) 

Tesselations using Penrose kites and darts have an amazing 
variety. In fact, it has been shown that the possible tile layouts are 
not only infinite but are uncountable (‘more infinite’ than the set of 
integers). A warning has been given by one writer that, because of 
this infinite variety, tiling with Penrose kites and darts is habit 
forming. 

The tile design program of the last section can be used to experi- 
ment with Penrose patterns. All that is needed is to describe the 
shape of the kite and the dart in DATA statements. (The DATA 
statements needed appear as Program 5.5.) A simple extension 
allows the addition of coloured arcs. Perhaps the reason that the 
patterns are so pleasing to the eye is because the lengths of the long 
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Plate 1 Illustration of the effect of plotting under the control of various GCOL 
operations in MODE 1. The screen originally contained four squares filled with the four 
available colours. The four small squares in the centre of each figure were plotted after 
the GCOL operation shown in the same figure. This shows how the colour laid down 


after a GCOL operation depends on the parameters of GCOL and the colour already on 
the screen. 


Plate 2 Using the screen memory to create four independent image 
planes with priority: (a) animated car is moving in the midground 
plane; (b) animated car is moving in the rear-ground plane 


Plate3 Three different flood fill algorithms in progress: (a) filling regions that have convoluted shapes 
requires a general flood fill algorithm; (b) simple point queueing algorithm showing diagonal ‘wavefronts’; 
(c) queueing algorithm that works on horizontal rows of pixels; (d) recursive algorithm that works on 
horizontal rows of pixels 


i 


Plate 4 Colour mixing in MODE 2: two digitized pictures filled using standard colours together with 
mixed colours (super-pixels). Note the selection of shades of green in the snake picture. The menu on the 
right displays the seven basic colours plus all possible two-colour mixes. 


Plate5 Colour mixing in MODE 2: using VDU 19 to instantaneously change the pallette — the same image 
before and after the use of VDU 19 


Plate 6 Colour synthesis: using different shades of red 
in a single object 


Plate 7 Colour synthesis: using different shades 


Plate 8 Colour synthesis: the same scene as that 
of red, green and blue in a three object scene 


in Plate 7 but using the standard colours 


Plate 9 Colour synthesis: a caption effect achieved 


by using slight displacement and successively brighter 
shades of yellow 


Plate 10 Colour synthesis: the 
standard saturated colours — 
combinations of 7 and 0 are used for 
each colour 
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Plate 11 Colour synthesis: 
desaturating the standard colours — 
this combination was achieved by 


A . F Press f8 
using combinations of 3 and 7 


Plate 12 Colour synthesis: ‘new’ 
colours produced by using arbitrary 
colour codes 


Plate 13 A colour 
version of a caption 
effect suggested in 
Chapter 3. In this 
illustration three 
variables are used — 
scaling, rotation and 
translation. 


Plate 14 An 
anamorphic painting: 
‘St Jerome praying’ 
1635 by a French 
follower of Caravaggio 
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Plate 15 A selection of Egyptian network patterns from ‘The Grammar of Ornament’ 


Plate 16 Penrose tesselations: non-periodic tesselations made from just two tiles the Penrose kitevand 
dart (white lines). The red and black lines show the permitted joinings: (a) the ‘sun’ pattern; (b) the ‘star’ 
pattern; (c) a pattern built around ‘batman’; (d) a selection of single motifs with their popular names 


Plate 17 Colour variation of tesselation patterns: (a) the flying fish tesselation using three colours; (b) a 
two-colour version of 17a (after VDU 19 changes) converts the tesselation to a network pattern; (c) the 
flying fish tesselation using four colours; (d) a three colour version of 17c (after VDU 19 changes) 


Plate 18 Colour variations on tesselation patterns: the lizard tesselation using four colours and VDU 19 
changes 


Plate 19 Using colour in the recursive square program: 19a shows 
the sequence in progress 


Plate 20 A selection of Koch flakes 


tan an “Sua 


+ mad 


(a) and (b) are the same 


Plate 21 Examples of network group 17 made from Koch flakes 


apart from VDU 19 changes, as are (c) and (d) 


pattern, 


a 


Plate 22 Recursively generated tree shapes: (a) and (b) two runs of the program using the same 
‘skeletal’ parameters; (c) and (d) two runs of the program using the same ‘bushy’ parameters 


Plate 23. A common 
pseudo-three- 
dimensional image that 
uses simple priority 
painting to delete 
hidden surfaces 


a 


Plate 24 The use of colour in non-linear transformations: the start Plate 25 A stereo pair 
coordinates of the colour fill sequence have been subject to the same 
transformations as the points in the motif 


Plate 26 (above) Advanced computer generated 
images by J. Blinn, courtesy of University of Utah: 
(a) a toroid whose textured surface shows both 
diffuse and specular reflection; (b) a strawberry 
showing both diffuse and specular reflection 


Plate 27 (left) The function f(x,y) = cos(x) using 
different colours to represent different function 
values 


and short edges are in the ‘golden ratio’ (1.61803...) much used in 
classical painting and architecture. 

An excellent description of Penrose kites and darts and some of 
their mathematics and ‘folklore’ appeared in Martin Gardner’s 
column in Scientific American, (1977). 


5.3 TILE DEFORMATIONS AND THE WORLD OF ESCHER 


A fascinating area for experimentation with tesselations is in the 
generation of unusual shapes that will tesselate. If the shapes 
resemble animals or birds, they can be decorated with lines to draw 
attention to this resemblance. Two simple shapes, a cat’s head anda 
whale, are illustrated in Figure 5.11. 

We first examine programming techniques for generating 
unusual shapes that will tesselate and leave the problem of colour- 
ing and decorating the shapes until later. 


8 The art of microcmputer ... 
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Figure 5.9 

Two ways of ‘marking’ kites 
and darts to force non- 
periodic tesselation. The two 
patterns used are the ‘bow tie’ 
and the ‘sun’: (a)(b) edges 
that can meet are marked 
with protruberances and 
matching dents; (c)(d) tiles are 
marked with curves that must 
meet in a tesselation 
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Figure 5.10 

Marking Penrose tiles to force 
non-periodic tesselation: (a) 
corners labelled x must 
always meet other corners 
labelled x, corners labelled y 
must always meet corners 
labelled y; (b) curves must 
always meet in a tesselation 


Deforming tile edges 

Any shape or set of shapes that will tesselate can be deformed into a 
new set of shapes that will also tesselate. The basic process that we 
can use is to replace an edge in one of the shapes by two lines at an 
angle that connect the two endpoints of the original edge (Figure 
5.12). Whenever this is done, a matching deformation must be 
carried out on any edge that could meet the deformed edge in a 
tesselation. We have illustrated this in Figure 5.13 by applying 
successive deformations to a square that tesselates by simple 
translation in the x and y directions. After a few deformations, the 
shape resembles a cat’s head. A rather more elaborate sequence of 
deformations that are loosely based on an Escher drawing are il- 
lustrated in Figure 5.14. 


A simple tile deformation program 
In this section, we present an introductory program (Program 5.6) 


5000 DATA 2,KD, 5010,5020, 18 

5010 DATA 4, 64,-88.0884429, 64,88.0884429, -64,20.7948606, 
-64,-20. 7948606, 0.618033989,72, 144 

5020 DATA 4, 64,20.7948606, 64,-20.7948606, -64,88.0884429, 
-64,-88 .0884429, 0.381966011,216, 72 


Program 5.5 DATA for the Penrose kite and dart. 


Tesselation 


that can be used to experiment with simple tile deformations of the 
type that we have just described. We limit ourselves here toa single 
shape that can be tiled by translating it in the x and y directions, like 
the square that was used in the last section. 

The structure of the initial shape and details of the translations 
needed to tesselate it are contained in DATA statements at the end 
of the program. Before we can present a detailed explanation of the 


\ Opposite edge must be 
Deforming \ deformed in exactly the 
an edge a same way 


Figure 5.11 
Two simple Escher-like 
tesselations 


Figure 5.12 
Deforming two matching 
edges 
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Figure 5.13 


Stages in constructing a cat’s 
head tesselation 


When deforming a shape, the program uses a variation on the 
technique of rubberbanding described in Chapter 2. The shape to be 
deformed is displayed on the screen and across marks a point on the 
circumference of the shape. We will call this point the ‘current 
point’. The user can move the cross round the circumference of the 
shape, either clockwise or anticlockwise under keyboard control. 
(We shall use the key ‘C’ for clockwise movement and ‘A’ for 
anticlockwise movement.) In addition to the main cross moved by 
the user, there is a smaller cross that marks the opposite point that 
will meet copies of the current point when the shape tesselates. 

At any stage, the user can opt to deform the tile at the current 
point (using the key ‘D’). When the user indicates that he wishes to 
deform the shape at a point on an edge, a new vertex is created and 
the program switches to rubberbanding mode. The new vertex can 


be moved about the screen using the cursor arrows. Lines connect- 
ing it to the endpoints of the line that has just been broken are 
maintained by rubberbanding. While this is happening, the pro- 
gram will automatically deform the opposite side in exactly the same 
way so that the shape’s tesselation properties are maintained. 

When the deformation is complete, the user can fix the vertex that 
has been dragged (using the key ‘F’) and the program automatically 
fixes the opposite vertex. 

If the user opts to deform from a previously created vertex, this is 
straightforward. Rubberbanding carries on from where it left off 
when the vertex was previously fixed. 

The original vertices of the shape are regarded as permanently 
fixed and the shape cannot be deformed by dragging these vertices. 
This is because the original vertices are usually points where copies 
of more than two vertices of the original shape meet in a tiling of the 
plane. In the case of the square, copies of four different corners of 
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Be 


Figure 5.14 
Stages in constructing a flying 
horse tesselation 


our initial square meet at each vertex in a complete tesselation. 

Another option that is available to the user while in the main 
command mode (i.e. when the program is not in rubber banding 
mode) is to request a tesselation of the screen to see how the shape 
looks in this context. (The key ‘T’ for tesselate is used.) When this is 
done, the program requests a scale factor to be used in drawing the 
shapes during the tiling process. This enables tilings to be tried with 
large or small copies of the basic shape. 


Program operation 

The main command loop of Program 5.6 repeatedly calls PROCcom- 
mand. The variable ‘comms$’ contains a string that is a list of the 
command keys permitted in the current state of the program. Any 
key pressed that is not in this list is ignored. Holding down a key 
results in repetitions of the key and the number of repetitions are 
counted using PROCcountcomms. The length of time a movement 


key is held down determines the amount of movement. A similar 
technique was used in the rubberbanding and picking and dragging 
programs of Chapter 2. 

An understanding of the workings of the various procedures 
called by PROCcommand requires an explanation of the data struc- 
ture used to represent the shape being manipulated by the program. 

Information about the vertices of the shape is stored in a set of 
parallel arrays (Figure 5.15). Similarly, information about lines is 
stored in another set of parallel arrays (Figure 5.16). Actually, 
several of the arrays are ‘byte blocks’ in which each location consists 
of a single byte rather than a complete variable. This is sufficient for 
some of the items of information needed to represent a vertex or a 
line. A statement of the form 


DIM bn 


allocates a block of n+1 bytes and stores the start address of the 
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10 vmax=150 

20 DIM x(vmax),y(vmax) ,prevl vmax,nextl vmax,corrv vmax 
30 DIM prevv vmax,nextv vmax,corrl vmax 
40 MODE 4 : xstep=4 : ystep=4 

50 PROCinitialise 

60 command$=GETS 

70 REPEAT 

80 PROCcommand 

90 UNTIL command$="Q" 

100 *FX 4,0 

110 *FX 12,0 

120 PROCcountcomms 

130 MODE 7:END 


140 DEF PROCinitialise 

150 LOCAL v 

160 vp=-1 : lLp=-1 

170 ~=—s start=vpt1 

180 READ Lastvertex,xstart,ystart 
190 FOR v=0 TO Lastvertex 


200 vp=vpt1 : lp=lpt1 

210 READ x(vp),y(vp) ,prevl?vp,nextl?vp,corrv?vp 
220 READ prevv?lp,nextv?lp,corrl?lp 

230 NEXT v 


240 READ ygridinc, xshift, xgridinc,yshift 
250 =PROCstartplanning 

260 = * FX 4,1 

270 ~=VvDdU 23,1,0;0;0;0; 

280 = Lef t$=CHR$(136) : right$=CHR$(137) 

290 up$=CHR$(139) =: down$=CHR$(138) 

300 §=dcomms$=Lef t$+right$+tup$t+downSt"F" 

310 =*FX 11,10 

320 = =*FX 12,1 

330 ENDPROC 


340 DEF PROCstartpLlanning 

350 atvertex=TRUE : vertex=start 

360 commsS="QTPCAD" 

370 ~=—GcoL 0,1 

380 PROCdrawplanningshape 

390 =6GCOL 3,1 

400 px=x(vertex) : py=y(vertex) 

410 =cpx=x(nextv?(corrl? (next l?vertex))) 
420 = cpy=y(nextv?(corrl?(nextl?vertex))) 
430 PROCcursors 

440 ENDPROC 


450 DEF PROCdrawplanningshape 
460 CLG 

470 VDU 29,xstart;ystart; 
480 PROCdrawshape(0,0,1) 


Program 5.6 Program that generates unusual shapes that tesselate. 
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490 ENDPROC 
500 DEF PROCdrawshape(sx,sy,scale) 
510 LOCAL v,vcount 
520 v=start 
530 MOVE sx,sy 
540 FOR vcount=0 TO Llastvertex 
550 v=enextv? (next l2v) 
560 DRAW sx+x(v)*scale,syty(v)*scale 
570 NEXT vcount 
580 ENDPROC 
590 DEF PROCcommand 
600 PROCcountcomms 
610 IF INSTR(comms$,command$)=0 THEN VDU7 =: command$=GET$ : 
ENDPROC 
620 IF command$="T" THEN PROCtesselate 
630 IF command$="P" THEN PROCstartpLanning 
640 IF command$="C(" THEN PROCclock(coms) 
650 IF command$="A" THEN PROCanticlock(coms) 
660 IF command$="'D" THEN PROCdeform 
670 ~=IF nextcom$=""" THEN command$=GET$ 
ELSE command$=nextcom$ 
680 ENDPROC 
690 DEF PROCtesselate 
700 LOCAL leftx, sx,sy, Ss, stopx,stopy 
710 = ¥FX 12,0 
720 CLS:INPUT "Scale factor",scale 
730 3=-*FX 11,10 
740 3=*FX 12,1 
750 CLG : VDU 29,0;0; 
760 planning=FALSE 
770~=—s GCOL O,1 
780 = Leftx=-scale*xgridinc/2 
790 =stopx=1279+scalexxgridinc/2 
800 boty=-scale*ygridinc/2 
810 stopy=1023+scale*ygridinc/2 
820 REPEAT 
830 sx=leftx : sy=boty 
840 REPEAT 
850 PROCdrawshape(sx,sy,scale) 
860 sx=sxtscale*xxgridinc 
870 sy=sytscalexyshift 
880 key$=INKEYS (0) 
890 UNTIL sx>stopx OR key$S=" " 
900 boty=boty+scalexygridinc 
910 leftx = leftx+scale*xshift 
920 IF leftx>O THEN 
leftx=leftx-scale*xgridinc : boty=boty-scale*yshift 
930 UNTIL boty>stopy OR keyS=" " 
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comms$="SRTPQ" 
GCOL 3,1 
ENDPROC 


DEF PROCclock(steps) 
IF atvertex THEN 
Line=nextl?vertex : PROCmoveontoline : Linestep=0 
PROCmovealong(steps) 
ENDPROC 


DEF PROCanticlock(steps) 
IF atvertex THEN 
lLine=prevl?vertex : PROCmoveontoline : 
Linestep=stepsonLine 
PROCmovealong(~steps) 
ENDPROC 


DEF PROCmoveontoLline 

LOCAL xdiff,ydiff,xsteps,ysteps 
cline=corrl?line 
linestart=prevv?line : Linefinish=nextv? line 
corrls=nextv2?cline : corrlf=prevv?cline 
xdif f=x(lLinefinish)-x(linestart) 
ydiff=y(linefinish)-y(linestart) 
xsteps=ABS (xdiff) DIV xstep 
ysteps=ABS(ydiff) DIV ystep 
IF xsteps>ysteps THEN stepsonline=xstepst1 

ELSE stepsonline=ysteps+1 

xinc=xdiff/stepsonline 
yinc=ydiff/stepsonline 
atvertex=FALSE 

ENDPROC 


DEF PROCmoveaLlong(dir) 
lLinestep=Linesteptdir 
IF linestep<=0 THEN 
Linestep=0 : atvertex=TRUE : vertex=Llinestart 
ELSE IF linestep>=stepsonline THEN 
Linestep=stepsonline : atvertex=TRUE : vertex=Linefinish 
PROCcursors 
px=x(linestart)+linestep*xinc 
py=y(linestart)+lLinestep*yinc 
cpx=x(corrls)+linestep*xinc 
cpy=y(corrls)+linestep*yinc 
PROCcursors 
ENDPROC 


DEF PROCcursors 
PROCcursor (px,py,16) 
PROCcursor(cpx,cpy,8) 

ENDPROC 


Program 5.6 continued 
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1330 DEF PROCcursor(x,y,s) 


1340 
1350 
1360 
1370 
1380 
1390 


1400 
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1420 
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1440 
1450 
1460 
1470 
1480 
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1540 
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1570 
1580 
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1600 


1610 
1620 
1630 
1640 
1650 
1660 


1670 
1680 
1690 
1700 
1710 
1720 
1730 
1740 
1750 


MOVE x,y 

PLOT 16,-s,0 
PLOT 17,2%s,0 
PLOT 16,-s,-s 
PLOT 17,0,2*s 


ENDPROC 
DEF PROCdeform 


LOCAL t, newvertex, vO, vi, cvO, cv1, x0, yO, x1, yl, 
cx0, cy0, cxi, cy1 
newvertex=NOT atvertex 
IF newvertex THEN PROCbreakline 
ELSE IF corrv?vertex=255 THEN VDU7 : ENDPROC 
vO=prevv?(prevl?vertex) : vl=nextv?(nextl?vertex) 
x0=x(vO0) : yO=y(v0) : xt=x(v1) =: yl=y(v1) 
cv0=nextv? (next l?(corrv?vertex)) 
cv1=prevv? (prevl?(corrv?vertex)) 
cx0=x(cv0) : cyO=y(cv0) : cxt=x(cv1) =: cyl=y(cv1) 
IF newvertex THEN PROCdrawlineastwo 
command$=GET$ 
REPEAT 
PROCdcomm 
UNTIL command$="F" 
PROCcountcomms 
PROCcursors 
GCOL 0,1 : PROCdraw : GCOL 3,1 
PROCcursors 
x(vertex)=px : y(vertex)=py 
x(corrv?vertex)=cpx : y(corrv?vertex)=cpy 


ENDPROC 
DEF PROCbreakLline 


PROCnew (px ,py, Line ,vpt2, Lp+2) 
PROCnew(cpx,cpy,cline,vp,lp) 
lastvertex=lastvertext+2 
atvertex=TRUE : vertex=vp-1 


ENDPROC 
DEF PROCnew(x,y,brokline,cv,cl) 


vp=vpt1 : lp=lp+1 

x(vp)=x : y(vp)=y 

nextl?vp=lp : prevl?vp=brokline 
nextv?lp=nextv?brokline : prevv?lp=vp 
prevl?(nextv?lp)=Lp 

nextv?brokline=vp 

corrv?vp=cv 

corrl?lp=corrl?brokline : corrl?brokline=cl 


1760 ENDPROC 
1770 DEF PROCdrawLineastwo 
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1780 PROCcursors 
1790 MOVE x0,y0O : DRAW 


x1,y1 


1800 MOVE cx0,cy0 : DRAW cx1,cy1 
1810 PROCdraw : PROCcursors 


1820 ENDPROC 
1830 DEF PROCdcomm 


1840 LOCAL xdir,ydir,cxdir,cydir 


1850 PROCcountcomms 


1860 IF INSTR(dcomms$,command$)=0 THEN 
VDU7 : command$=GET$ : ENDPROC 


1870 IF command$=Left$ 


THEN xdir=-xstep:ydir=0 


1880 IF command$=right$ THEN xdir=xstep:ydir=0 
1890 IF command$=up$ THEN xdir=O:ydir=ystep 


1900 IF command$=down$ 


THEN xdir=0:ydir=-ystep 


1910 PROCcursors : PROCdraw 


1920 px = px+xdir*coms 


: py = pytydir*coms 


1930 cpx = cpxtxdir*coms : cpy = cpytydir*coms 
1940  PROCcursors : PROCdraw 
1950 IF nextcom$=""" THEN command$=GETS 

ELSE command$=nextcom$ 


Program 5.6 continued 


Figure 5.15 

The vertex arrays: a set of 
matching locations contains 
information about one vertex 


block in the variable ‘b’. Location ‘i’ in this block is then accessed by 
an expression of the form 


b? 4 


If a value to be stored in an array location can have only one of 256 
(or fewer) values, replacement of the array by a byte block can result 
in considerable saving of memory space. Such savings are often 
necessary in a complex program. 

Each vertex is represented by a set of five values stored in corre- 


Previous line Nextline Corresponding 
x coordinate y coordinate pointers pointers —_- vertex pointers 


Information 
record for 
one vertex 


1960 ENDPROC 


1970 DEF PROCcountcomms 

1980 coms=0 

1990 REPEAT : coms=comst+1 : nextcom$=INKEY$(11) 
2000 ~=UNTIL nextcom$<>command$ 

2010 ENDPROC 


2020 DEF PROCdraw 

2030 MOVE x0,y0 : PLOT 13,px,py : PLOT 13,x1,y1 

2040 MOVE cx0,cy0 : PLOT 13,cpx,cpy : PLOT 13,cx1,cy1 
2050 ENDPROC 


5000 DATA 3,450,350 si. 
5010 DATA 0, 0,3,0,255, 0,1,2, 
0,300,0,1,255, 1,2,3, 
300,300,1,2,255, 2,3,0, 
300, 0,2,3,255, 3,0,1 
5020 DATA 300,0,300,0 


y 


avr 


sponding locations in the five vertex arrays (or byte blocks). The first 
two values for a vertex are its x and y coordinates. Coordinates are 
expressed relative to the bottom left hand corner of the shape. The 
next two entries for a vertex provide connectivity information. They 


Previous vertex Next vertex Corresponding 
pointers pointers line pointers 
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Figure 5.16 

The line arrays: a set of 
matching locations contains 
information about one line 
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contain ‘pointers’ to the ‘previous’ line (anti-clockwise round the 
boundary of the shape) and to the ‘next’ line (clockwise round the 
boundary). A ‘pointer’ to a line is simply the subscript of the set of 
locations in the line arrays that contain information about the line. 
The final piece of information for a vertex is a pointer to another 
vertex that will meet the first vertex in a tesselation. A ‘pointer’ is 
again just a subscript for a set of locations in the vertex arrays. 

The last piece of information is needed if the user attempts to 
deform the shape at this vertex. The program must carry out a 
similar deformation at the corresponding vertex. Deformation is not 
allowed at the original vertices of the initial shape and this is 
indicated by giving them a ‘corresponding vertex value’ of 255. 

The information stored for a line is similar. There is a pointer to 
the ‘previous’ vertex (anti-clockwise), a pointer to the next vertex 
(clockwise) and a pointer to the ‘corresponding line’ that will be 
adjacent to the first line in a tesselation. 

Thus the connectivity between vertices and lines on the screen is 
reflected as a set of pointers in the data structure. 

We can think of a slice across the vertex arrays as a ‘record’ 
containing information about a vertex. Similarly, a slice across the 
line arrays is a record containing information about a line. Figure 
5.17 is an illustration of the data structure representation of the 
initial square from which the cat’s head and the horse tesselations 
were developed. 

There are a number of variables that are used to indicate the 
position of the current point on the perimeter of the shape being 
planned. The coordinates of the current point are stored as (px,py) 
and the coordinates of the corresponding point are stored as 
(cpx,cpy). 

The value of the global variable ‘atvertex’ is set to TRUE if the 
cross marking the current point is at a vertex of the shape. This 
variable is set to FALSE if the cross is somewhere on a line between 
two vertices. 

If the current point is at a vertex, then the variable ‘vertex’ con- 
tains a pointer (or subscript) to the locations in the vertex arrays that 
contain information about the current point. 

If the current point is part way along a line, then the variable ‘line’ 
contains a pointer to the locations in the line arrays that contain 
information about the line. It is convenient to have another variable 
‘cline’ that contains a pointer to the line that corresponds to the first 
line. 

When the current point is on a line, ‘xinc’ and ‘yinc’ are the 
increments for ‘x’ and ‘y’ that are needed to move one step along the 
line in a clockwise direction. These values depend on the length and 
orientation of the current line. Values are chosen that make move- 
ment take place in steps of approximately one pixel. The position of 
the current point on the current line is indicated by the value of the 
variable ‘linestep’. This contains a count of the number of steps from 
the start of the current line to the current point. 
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The two variables ‘linestart’ and ‘linefinish’ are pointers to the Figure 5.17 
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vertices at either end of the current line and ‘corrls’ and ‘corrlf’ are —_ Record and pointer structure 


pointers to the vertices at either end of the corresponding line. Note _ for an initial square: each 


that when two shapes meet on a line in a tesselation, the direction _ record is a slice through either 
along the line that represents clockwise movement round one of the _ the vertex arrays or the line 


shapes always represents anti-clockwise movementroundtheother @7@YS 
shape. Thus ‘linestart’ is set to the ‘previous’ vertex of the current 

line, but ‘corrls’ is set to the ‘next’ vertex of the corresponding line. 
Similarly, ‘linefinish’ is set to the ‘next’ vertex of the current line, but 

‘corrlf’ is set to the ‘previous’ vertex of the corresponding line. 

Let us now examine how the above data structures and variables 
are used by the procedures that implement clockwise and anti- 
clockwise movement round the boundary of the shape (PROCclock 
and PROCanticlock). Each of these procedures has a parameter 
indicating the number of ‘steps’ round the circumference that it 
should try to take. 

PROCclock first tests to see whether the current point is at a 
vertex. If itis, the variable ‘line’ is set to the next line round from the 
vertex and the procedure PROCmoveontoline is called to set all the 
relevant variables to appropriate values for that line. A value of zero 
is then given to ‘linestep’ to indicate that we are at the start of the 
line. Whether or not the current point was previously at a vertex, it 
is now on a line and PROCmovealong is called to move the current 
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Figure 5.18 

Variable terminology used in 
program during tile 
deformation process 


point the required number of steps along the line. PROCmovealong 
adjusts the variables appropriately and ensures that movement 
does not proceed beyond the endpoints of the line. 

The structure of PROCanticlock is similar to the structure of 
PROCclock. 

We now consider the operation of the rubberbanding process 
used by PROCdeform to deform the outline of the tile. If the deform 
command is issued when the current point is at a vertex from which 
deformation is permitted, then rubberbanding can start immedi- 
ately. If the deform command is issued when the current point is 
part way along a line, then the line must be broken and data 
structure entries for a new vertex and a new line must be created. 
The corresponding line must be broken in the same way. When 
necessary, a call of PROCbreakline creates the new entries in the 
data structure. 

The behaviour of the remainder of the procedure is similar to that 
of the rubberbanding program of Chapter 2, except that here, four 
lines are being stretched at once. Two lines extend from the current 
point to the two adjacent vertices and two similar lines extend from 
the point that corresponds to the current point. (x0,y0) and (x1,y1) 
are the two points to which lines are connected from the current 
point and (cx0,cy0) and (cx1,cy1) are the two points to which lines 
are connected from the point that corresponds to the current point 
(Figure 5.18). 

A rather interesting problem arises if rubberbanding is to proceed 
from a point that was previously part way along a line. Before we 
can start, we must delete the line between (x0,y0) and (x1,y1) and 
redraw it as two lines from (px,py) to (x0,y0) and from (px,py) to 
(x1,y1). A similar action must be carried out at the corresponding 
point. This may seem rather strange in view of the fact that (px,py) 
lies accurately on the line between (x0,y0) and (x1,y1). The reason 
that this is necessary arises from the fact that the computer draws a 
line by filling a sequence of separate pixels in such a way as to spread 
out any ‘steps’ in the line. The sequence of pixels that are filled when 


(xy, y,) (cx, cy,) 


Point being 


Corresponding point 
(px, PY) ¢ dragged (cpx, cpy) jaan 


also dragged 


(Xo, Yo) (cxg, cYg) 


Sequence of pixels filled when two marked 
points are joined by a straight line 


Sequence of pixels filled when mid-point of 
line is joined to one of its end points 


a line is drawn does not necessarily match the sequence of pixels 
that are filled when a point part way along the line is connected to 
the line’s endpoints. A simple case is illustrated in Figure 5.19. 

If the single line were not redrawn as two before starting the 
rubberbanding process, then the first attempt at moving the drag- 
ged point would result in an attempt to delete the original line by 
redrawing it in two parts (in exclusive OR mode). The line drawing 
algorithm could visit a different sequence of pixels than were visited 
when the original line was drawn and parts of the line would be left 
undeleted. 

We can now explain the significance of the various values that 
need to to be supplied to the program in DATA statements. 

The first value supplied is the number of the last vertex in the 
initial shape. The corners in the initial shape are numbered from 0 
upwards. In Program 5.6, we included the DATA statements for the 
square used to generate the cat’s head and the horse. Here, the 
number of the last vertex is 3. The next two values indicate where on 
the screen the shape should be placed in planning mode. 

There follows a sequence of values grouped in fives and threes. 
The first five values are the entries for the vertex array locations that 
will represent the first vertex(vertex 0). The next three values are the 
entries for the line array locations that represent the first line (line 0). 
The next five values represent the next vertex, the next three values 
represent the next line and so on. 

The vertex and line numbering system used for the square is 
illustrated in Figure 5.20. Thus the data for the first vertex (vertex 
number 0) consists of its x and y coordinates (0,0), the numbers of 
the previous line and the next line (3,0) and a ‘corresponding vertex 
value’ of 255 to indicate that this is a fixed vertex. The three values 
for the first line (line 0) are the numbers of the previous vertex and 
the next vertex (0,1) together with the number of the corresponding 
line (2). The structure created in the vertex and line arrays as a result 
of this DATA was illustrated in Figure 5.17. 

After the vertex and line data, we have four values that are used to 
describe the layout of the tesselation in which the shape will be 
used. The first two values are the y grid increment and an associated 
‘x-shift’ and the next two values are the x grid increment and an 
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Figure 5.19 

Drawing a line in two parts 
does not necessarily fill the 
same sequence of pixels as 
does drawing the line in one 
piece 
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Figure 5.20 

Vertex and line numbering 
system used for the simple 
square 


5000 DATA 3,250,350 

5010 DATA 0, 0,3,0,255, 
200,300,0,1,255, 
800 ,300,1,2,255, 
600, 0,2,3,255, 

5020 DATA 300,200,600,0 


associated ‘y-shift’. In the case of the square for which the data 
appeared in Program 5.6, the x-shift and y-shift are set to zero and 
tesselation is obtained by using simple increments in the x and y 
directions. However, to see the need for the x-shift value, consider 
the problem of using a parallelogram as the starting shape. Data for 
such a shape appears in Program 5.7. The structure of the shape is 
exactly the same as the previous square and the only difference in 
the vertex and line information is in the coordinates of the vertices. 
However, when a step is taken from one row of the tesselation to the 
next, not only must ‘y’ be increased, but ‘x’ must also be increased to 
compensate for the fact that the parallelogram leans to the right 
(Figure 5.21). 

As another example of our initialising DATA statements, we can 
give the square a rather more elaborate structure in preparation for 
the generation of the ‘flying fish’ tesselation illustrated in Figure 
5.22. The first picture in Figure 5.22 illustrates the initial layout that 
we require. Here, the top edge of a square does not meet the 
complete bottom edge of another single square, but meets half the 
bottom edge of one square and half the bottom edge of another. If 
the left half of the top edge of our starting square is deformed, then 
the right half of the bottom edge must be deformed to match. 
Similarly, the right half of the top edge corresponds to the left half of 
the bottom edge. To deal with this, we must treat the square as if it 
had six vertices and six edges numbered as in Figure 5.23. The 
DATA statements required to describe this shape and its tesselation 
pattern are presented as Program 5.8. 


0,1,2, 
1,2,3, 
2,3,0, 
3,0,1 


Program 5.7 DATA for using Program 5.6 to deform a parallelogram. 


x shift = 200 


(200,300) (800,300) 


y grid 
increment 
= 300 


(0,0) (600, 0) 
_ = — 
x grid increment 
= 600 yshift = 0 


5.4 COLOURING AND DECORATING TILES 


Many of the tesselations illustrated so far have included tiles that 
have been filled with contrasting colours and decorated with lines 
that enhance our interpretation of the tile as an animal or fish. We 
now look at ways of extending our tile design program so as to 
permit colour filling and decoration of tiles. 


A colour fill algorithm for tiles 

Earlier in this chapter, we described a simple sequence of triangle fill 
operations that can be used for colouring a convex polygon. The 
shapes generated by our tile deformation program are not 
necessarily convex. They tend to have recesses in the boundary that 
would cause areas outside the boundary to be filled if we used the 
simple approach described earlier. 

Filling an arbitrary polygon with colour is quite a tricky operation. 
One way of doing this would be to draw the shape and use one of 
the flood-fill algorithms described in Chapter 2. However, if a flood- 
fill algorithm were used for every second tile drawn in a tesselation, 
the process of tesselation would be unacceptably slow. 

Triangle fill operations are much faster and it is possible to break 
down an arbitrary polygon into a set of triangles that can be filled. It 
happens that the data structure we have used in the deformation 
process is easily adapted to the implementation of an algorithm that 
breaks our shape down into a set of triangles for filling. To see why, 
consider the three shapes illustrated in Figure 5.24. In the first 
shape, the triangle defined by the three vertices v1, v2 and v3 is 
completely outside the shape and must not be filled. In the second 
case the triangle vl, v2, v3 is completely inside the shape and can 
safely be filled. In the third case, the triangle is partly inside the 
shape and partly outside and again cannot be filled. 

In order to distinguish the three cases illustrated in Figure 5.24, a 
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Figure 5.22 program needs to know which ordering of the three vertices in- 
A ‘flying fish’ tesselation volved represents the clockwise direction round the boundary. If 


generated from the initial three adjacent vertices, v1, v2, and v3 taken clockwise round the 
square pattern shown 


Figure 5.23 

Vertex and line numbering 
used in the initial square that 
produced the ‘flying fish’ 


5000 DATA 5,450,350 
5010 DATA 0, 0,5,0,255, 0,1 
0,300,0,1,255, 1,2 
150,300,1,2,255, 2,3 
300,300,2,3,255, 3,4, 
300, 0,3,4,255, 4,5 
150, 0,4,5,255, 5,0 
5020 DATA 300,150,300,0 


Program 5.8 DATA used in Program 5.6 to produce the flying fish tile. 


boundary, are such that v3 is to the left of the line defined by v1 and 
v2, then the triangle v1, v2, v3 is at least partly outside the shape 
(case 1 in Figure 5.24). If v3 is to the right of the line defined by v1 
and v2, then the triangle is to the right of the boundary and is at least 
partly inside the shape (case 2 or 3 in Figure 5.24). In case 2, no other 
part of the boundary of the shape ‘re-enters’ the triangle, but in case 
3 this does happen. Once we have established that a particular 
triangle may be completely inside the shape, we must make a 
further test to eliminate the possibility of ‘re-entrancy’ before we fill 
it. To do this, we need to apply a test to every other vertex on the 
boundary to see if it lies inside the triangle v1, v2, v3. Only if this test 
succeeds for every other vertex can the triangle be safely filled. 

We can easily extend Program 5.6 to use a procedure that finds a 
sequence of triangle fill operations. The alterations needed are 
presented as Program 5.9. PROCcolourfill is called from the main 
command loop of the program in response to the command key ‘F’. 
The algorithm implemented by PROCcolourfill works its way round 
and round the boundary searching for triangles that can be filled. 
When such a triangle is found and filled, the boundary is shrunk to 
exclude the newly filled triangle. The process continues until the 
boundary has shrunk to only two points, which means that the 
original shape has been completely filled. 
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Figure 5.24 

Various types of triangle v1, 
v2, v3 on the boundary of a 
shape that is to be colour 
filled 
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35 cmax = 50 
36 DIM colnextv vmax, colop cmax, colv cmax 


165 colp = -1 
360 comms$=""QTPCADF" 
480 PROCdrawshape(0,0,1, 0) 


500 DEF PROCdrawshape(sx,sy,scale, col) 
512 IF colp=-1 THEN col=0 
514 IF col<>O THEN GCOL Q,col : 
FOR v=0 TO colp : 
x=x(colv?v) =: y=y(colv?v) : 
PLOT colop?v, sx+x*scale, syty*scale : 
NEXT v 
516 GCOL 0,1-col 


655 IF command$=""F" THEN PROCcolourfillt 
700 LOCAL col,r, leftx, sx,sy, Ss, stopx,stopy 


815 r=0 

835 col=r 

850 PROCdrawshape(sx,sy,scale,col) 
885 col=(col+1) MOD 2 


915 r=(r+1) MOD 2 

920 IF leftx>0O THEN 
leftx=leftx-scale*xgridinc : 
boty=boty-scale*yshift : r=(r+1) MOD 2 


1415  colp=-1 


3000 DEF PROCcolourfill 

3010 LOCAL v1,v2,v3,v 

3020 IF colp>-1 THEN VDU7:ENDPROC 
3030 GCcOL 0,1 

3040 FOR v=0 TO vp 

3050 colnextv?v=nextv? (next L?v) 
3060 NEXT v 

3070 =vil=start : v2=colnextv?v1 : v3=colnextv?v2 
3080 REPEAT 

3090 v1=v2:v2=v3:v3=colnextv2?v3 
3100 UNTIL FNright(v1,v2,v3) 

3110 PROCpoint(4,v2) 

3120 REPEAT 


3130 IF FNright(v1,v2,v3) THEN IF FNoktofill(v1,v2,v3) THEN 
PROCtrifill(v1,v2,v3):v2=v1 
3140 v1=v2:v2=v3:v3=colnextv?v3 


Program 5.9 Colour fill extensions to Program 5.6. 
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3500 
3510 
3520 
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UNTIL vi=v3 
GCOL 3,1 
commsS$="QTP" 


ENDPROC 


DEF FNright(v1,v2,v3) 
LOCAL x2,x3,y2,y3,r,testy 


x2=x(v2)-x(v1) : y2=y(v2)-y(v1) 
x3=x(v3)-x(v1) : y3=y(v3)-y(v1) 
r=SQR(x2%x2tyexy2) 
testy=-y2*x3/r+x2*y3/r 

testy<=0 


DEF FNoktofill(v1,v2,v3) 
LOCAL v,x1,y1,x2,y2,x3,y3,X,y ,X21,y21,x31,y31,tnum, 


d,s,t,reentrant 
v=colnextv?v3 
IF v=v1 THEN =TRUE 
reentrant=FALSE 
x1=x(v1) os x2=x(v2) : x3=x(v3) 
yl=y(v1) : y2=y(v2) : y3=y(v3) 
X21=x2-x1:y21=y2-y1 
x31=x3-x1:y31=y3-y1 
tnum=x21*y31-y21*x31 
REPEAT 
x=x(v) : y=y(v) 
d=x21*(y3-y) -(x3-x) *y21 
IF ABS(d)<1 THEN reentrant=FALSE 
ELSE s=(x31* (y3-y)-(x3-x)*y31)/d : t=tnum/d : 
reentrant = (t>1)AND(s>0)AND(s<1) 
v=colnextv?v 
UNTIL reentrant OR v=v1 
NOT reentrant 


DEF PROCtrifill(v1,v2,v3) 


IF v2=colv?colp THEN PROCpoint(4,v1) 

ELSE IF v1=colv?colp THEN PROCpoint(4,v2) 
ELSE PROCpoint(4,v1) : PROCpoint(4,v2) 
PROCpoint (85 ,v3) 

colnextv?v1t=v3 


ENDPROC 


DEF PROCpoint(op,v) 


IF colp=cmax THEN PRINTTAB(O,0);"No space": ENDPROC 
colp=colp+t1 

colop?colp=op : colv?colp=v 

PLOT op,x(v),y(v) 


3530 ENDPROC 
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37 dmax = 50 
38 DIM decop dmax, dx(dmax), dy (dmax) 


166 
305 
360 
575 


656 


decp = -1 
Lcomms$=Left$+trig 
comms$=""QTPCADFL" 


IF decp>-1 THEN 
FOR p=0 TO dec 


Each triangle, defined by three consecutive vertices on the current 
boundary, is first tested to see if it lies to the right of the boundary 
(using FNright). If it does, all other vertices on the boundary are 
then checked to see if any lie within the triangle. This test is carried 
out by FNoktofill. When a triangle defined by three consecutive 
vertices can be filled, the necessary PLOT operations (MOVE and 
triangle fill) and pointers to the vertices involved are recorded ina 
list built up in the arrays ‘colop’ and ‘colv’ (see Figure 5.25). The 
PLOT operations can also be carried out on the screen in planning 
mode so that the algorithm can be seen in action. 

When a triangle defined by vertices v1, v2 and v3 has been filled, 
the pointers representing the connectivity of the boundary are 
adjusted so that v1 points to v3 and v2 is left out of the chain of 
pointers that represent the boundary. Each time a triangle is filled, 
the boundary shrinks by one vertex, and the area left unfilled 
shrinks inwards. Two stages in filling the horse are illustrated in 
Figure 5.26. 

Because the colouring process involves changing the connectivity 
information about the shape, it must operate on a private copy of 
this information, made before the colouring process starts. We 
could use copies of the vertex and line arrays, but in fact, the lines 
are irrelevant. Before applying the algorithm, the sequence of poin- 
ters in the line and vertex arrays is used to create a new sequence of 
pointers that can be used to visit the vertices in clockwise order. 
These new pointers are stored in the byte block ‘colnextv’. 


Adding tile decorations 
The final program alteration that we present in detail (as Program 
5.10) is the inclusion of a procedure PROClinedraw. This is called 


ht$+up$+down$S+"0FP" 


p: 


x=dx(p) sy=dy(p):PLOT decop?p, sx+x*scale, syty*scale : 


NEXT p 
IF command$="L" T 
PROCcursors 


4000 DEF PROCLinedraw 
4010 LOCAL Lx,ly,px,py,dop 


HEN 


: PROCLinedraw : PROCcursors 


Program 5.10 Line drawing extensions to Program 5.6 (to permit the decoration of tiles). 
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Vertices to 
PLOT operations which PLOT 
used in colouring operations apply 
colop colv 


Pointers to the 
vertex arrays 


Figure 5.25 

Data structure used for 
staring PLOT operation 
needed to colour a tile: a 
PLOT operation is either 4 
(MOVE) or 85 (triangle fill) 


from the main command loop in response to the command key ‘L’. 
The basic structure of this procedure is the same as the rubberband 
program used for line-drawing described in Chapter 2. The main 
difference is that each time a point is fixed, the coordinates of the 


4020 IF decp>-1 THEN lLx=dx(decp) : ly=dy(decp) 
ELSE lx=0 : ly=0 

4030 dop = 4 : px=lx : py=ly 

4040 GCOL 3, 1 

4050 PROCLcursor 

4060 command$=GETS 

4070 REPEAT 

4080 PROCdeccomm 

4090 UNTIL command$ = "P" 

4100 PROCLdraw : PROCLcursor 

4110 ENDPROC 


4120 DEF PROCdeccomm 

4130 PROCcountcomms 

4140 IF INSTRCLcomms$,command$)=0 THEN 
VDU7 : command$=GET$ : ENDPROC 

4150 PROCLdraw : PROCLcursor 


continued 
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4160 IF command$ 
4170 IF command$ 
4180 IF commands 
4190 IF command$S 


"EF" THEN PROCTix 

leftS THEN px=px-xstep*coms 
right$ THEN px=px+xstep*coms 
up$ THEN py=pytystep*coms 
4200 = IF command$ = down$ THEN py=py-ystep*coms 
4210 IF command$ "0" THEN dop=9-dop 

4220 PROCldraw +: PROCIcursor 

4230 IF nextcom$='"'"" THEN command$=GET$ 

ELSE command$=nextcom$ 


4240 ENDPROC 


4250 DEF PROCLdraw 
4260 MOVE Lx,ly : PLOT dop,px,py 
4270 ENDPROC 


Program 5.10 continued 


point are stored in two arrays ‘dx’ and ‘dy’ and the operation to be 
used at that point (MOVE or DRAW) is recorded in the byte block 
‘decop’ (Figure 5.27). This information is used whenever a tile is 
drawn for planning or in a tesselation. The results of experiments 
with colour in the flying fish tesselation appear in Colour Plate 17. 


5.5 FURTHER EXPLORATION OF THE WORLD OF ESCHER 


In the preceding sections, we have presented in detail a program for 
designing interesting shapes that will tesselate. In the interests of 
clarity, we have restricted ourselves to shapes that tesselate by 
simple translation. In this section, we discuss further variations that 
could be programmed. Programming details are not included, but 
we do include photographs to illustrate the possibilities. 


Figure 5.26 

Two stages infindingacolour ~) |, . . 
fill sequence for the flying Tiles in different orientations 

horse Figure 5.11, which was referred to in our introduction to the world 
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4280 DEF PROCTix 


4290 GCOL 4,0 : PROCldraw 
4300 GCOL 3,1 

4310 decp=decp+1 

4320 decop?decp=dop 

4330 dx(decp)=px : dy(decp)=py 
4340 Lx=px : ly=py 

4350 ENDPROC 


4360 DEF PROCLcursor 
4370 IF dop=4 THEN PROCcursor(px,py,16) 
4380 ENDPROC 


of Escher, included a tesselation of a whale-like shape. However, 
this tesselation could not have been produced by the program that 
has been developed. The whale is not only translated in the tessela- 
tion, but is also displayed in different orientations. In order to 
design a tile that can be tesselated in different orientations, the 
design program would have to be extended to handle the rotations 
involved. 

There are two aspects of the program’s behaviour that would 
have to be modified to take account of rotations. 

Firstly, the procedure that draws a tile would have to be supplied 


Drawing x coordinates y coordinates 
operations for operations for operations 
decop dx dy 


Figure 5.27 

Data structure used for 
staring drawing operations 
and coordinates used in 
decorating a tile. Each 
drawing operation is either 4 
(MOVE) or 5 (DRAW) 
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Figure 5.28 

Deforming a tile that 
tesselates by translation and 
rotation 


Figure 5.29 
Stages in constructing a lizard 
tesselation 


Matching 
deformation 
downwards 


Deformation 
to the left 


with extra information specifying the orientation of the tile it is to 
draw. This information could take the form of an angle of rotation or 
a transformation matrix. All the coordinates involved in drawing, 


Ba ee 
ph ae 


colouring and decorating the tile would have to be modified during 
the drawing process. The procedure PROCtesselate would have to 
pass appropriate orientation information to each call of the tile 
drawing procedure. 

The second point in the program at which rotations would have to 
be handled is in the tile deformation process. The whale tesselation 
was constructed from an initial square. However, it is no longer the 
case that opposite sides of the shape correspond. For example, the 
left side of a whale always meets the top of a whale in a tesselation. 
We can easily set up a structure of pointers to represent the new 
correspondences, but a difficulty now arises in implementing the 
deformation process. If a point on the left hand side of the shape is 
dragged to the left, then a corresponding point on the top has to be 
dragged downwards to maintain the tesselation property (Figure 
5.28). This is because the two sides that correspond do not lie at the 
same orientation in the basic shape, but are at 90° to each other. 


Tesselation 
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In more elaborate tesselations, corresponding sides could be at 
different angles to each other and a program would have to allow for 
this in the deformation process. The direction of any deformation 
carried out at the current point must be transformed appropriately 
before being applied to the corresponding side. 

Figure 5.29 shows the build up of a lizard like shape that tesselates 
by translation and rotation in the same way as the whale. This 
example is based on another of Escher’s drawings. Experiments 
with colour in the lizard pattern are shown in Colour Plate 18. 


Multiple shapes 

Figure 5.30 shows a simple example of a pair of shapes that together 
tesselate the plane. These were generated by deforming a pair of 
squares that alternate in a tesselation. Of course a tesselation of the 
initial pair of squares is indistinguishable from a tesselation of a 
single square! To handle this, our data structure would need to be 
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Figure 5.30 (opposite top) 

A simple pair of shapes that 
tesselate: they were produced 
by deforming a pair of 
squares 


Figue 5.31 (opposite below) 
Tesselations with a deformed 
isosceles triangle 


Figure 5.32 
Tesselations with another 
deformed isosceles triangle 
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Figure 5.33 

Deforming an isosceles 
triangle so that it will still 
tesselate in circular and spiral 
patterns 


Figure 5.34 

Two different ways in which 
isosceles triangles can meet in 
circular and spiral tesselations 


Matching deformation 
here 


Deform side here 


Matching deformation Matching deformation 
here here 


extended to contain information about two (or more) shapes each 
with their own vertices, lines and connectivity information. 


Experiments with isosceles triangles 
As a final example of further possibilities, Figures 5.31 and 5.32 
demonstrate another type of tesselation layout involving rotations. 
We have already seen examples of these tesselation patterns in 
Figure 5.5. The basic patterns in Figure 5.5 were built up with copies 
of an isosceles triangle in different orientations. 

The two equal sides of the initial triangle can be deformed in such 
a way as to maintain its tesselation property. Doing this 
automatically is rather trickier than it was in the examples that we 
have looked at so far. When a side is deformed at one point, 
matching deformations have to take place at three other points 
(Figure 5.33). This is because there are two different ways in which 
two copies of the initial triangle can meet in a tesselation (Figure 
5.34). 


AS 


6 Recursion, fractals and 
natural patterns 


In this chapter we shall be looking at the fascinating application of 
recursive graphics. There are many complex patterns and curves 
that can easily be described recursively and recursion is a useful tool 
in computer graphics and computer generated art. Recursive 
techniques can also be used to imitate natural patterns such as 
snowflakes, trees and coastlines. To use recursive graphics we need 
an understanding of recursion as a programming process. We will 
start this chapter with a simple introduction to recursion that does 
not yet involve us in the extra complication of recursive graphics. 
Once recursion is understood as a process we can proceed to use it 
as a tool in graphics. 


6.1 A SIMPLE INTRODUCTION TO RECURSIVE PROCESSES 


In computing, a recursive process is one that is ‘described in terms 
of itself’. Recursion is viewed with suspicion by beginners: how on 
earth can an operation be defined in terms of itself? One of our 
students recently remarked that writing a recursive program 
seemed like an act of faith. However, once mastered, recursion is a 
powerful tool and should not be neglected. There are many 
programming problems where a recursive solution is elegant and 
easy to write and the non-recursive solution is difficult and tricky. 
Many human problem-solving activities are recursive in nature. For 
example, let us consider the problem of planning a route for walking 
through London from Trafalgar Square to the British Museum. One 
way of solving this problem might be to pick an intermediate 
landmark such as Covent Garden and break our original problem 
down into the problem of getting from Trafalgar Square to Covent 
Garden and from Covent Garden to the British Museum. A problem 
of navigation has been broken down into two easier subproblems, 
also of navigation. 

This is the essence of recursion. The solution to a problem is 
described in terms of solutions to easier or smaller versions of the 
same problem. We could (rather fancifully) describe how to find a 


9 The art of microcmputer ... 


241 


242 ~=— Art of microcomputer graphics 


route between two points using (pseudo) Program 6.1. We shall not 
expand this into a complete BASIC program. In order to do so we 
would need to store a street map of London, lists of landmarks and 
their locations, a definition of what we mean by an ‘easy’ problem 
and so on. However, this outline procedure describes a process with 
which we are all subconsciously familiar. It also exhibits the essen- 
tial features of a recursive procedure. 

When a procedure is called, the particular problem to be con- 
sidered is specified by means of its parameters: 


PROCfind_route between("Trafalgar Square", 
"British Museum") 


The first thing the procedure does is to decide whether the problem 
represented by its parameters can be solved directly without break- 
ing it down into further subproblems. If this can be done, no 
recursion takes place. This is essential, otherwise the process of 
breaking the problem down into subproblems would never stop. 

If the problem to be solved by the call of the procedure is not an 
easy one, it breaks it down into easier subproblems and requests the 
solution to each of these subproblems in turn. The solutions to the 
subproblems are requested by calling the same procedure, but with 
different parameters. You might find it easier to think of the 
subproblems being solved by different copies of the procedure, 
although it does not happen like this behind the scenes. This is the 
classic ‘divide and conquer’ approach to problem solving, so impor- 
tant in areas like Artificial Intelligence. 

Learning to use recursion successfully means learning to recog- 
nise when a problem can be broken down into easier, or smaller, 
versions of itself and remembering to start a recursive procedure 
with a test that recognises when a given problem does not need to be 
further broken down. It is usually easier to write a recursive pro- 
cedure without worrying in detail about what the exact sequence of 
operations will be when the procedure is called (an ‘act of faith’ if 
you like). Just remember the two basic ingredients: the stopping 
condition and the breakdown into easier subproblems. 

It is of course interesting to understand what does happen when 
we call a recursive procedure. In fact, when a program does not 
work as intended, such an understanding is essential. 


100 DEF PROCfind_route_between(a,b) 

110 LOCAL m 

120 IF getting from a to b is ‘easy’ Cone street say) THEN 
PROCprint_route(a,b) : ENDPROC 

130 m= a landmark approximately midway between a and b 
140 PROCfind_route_between(a,m) 

150 PROCfind_route_between(m,b) 

160 ENDPROC 


Program 6.1 Recursive breakdown of the problem of finding a route between two points. 
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6.2 SOME EASY RECURSIVE PROGRAMS 


Many of the programs presented in this section could very easily be 
written without recursion using simple loops. However, such ‘inap- 
propriate’ use of recursion provides a useful introduction to the 
subject using problems with which we are familiar. 

The first example (Program 6.2) simply prints the positive in- 
tegers from 1 to n using a PROCprintupto(n). We can break down 
the process of printing the numbers up to n into the problem of 
printing the numbers up to n-1 followed by the use of a PRINT 
statement to print n. Of course if n = 0, then there are no values to be 
printed and this is the condition that we shall use to terminate the 
recursion. In the next section we shall discuss in detail what hap- 
pens when this program is obeyed. For the time being we shall take 
on trust the fact that a recursive program works! 

An interesting variation on this program is to change it so that it 
prints the integers up to n, but in reverse order. In this case, the 
breakdown into an easier subproblem gives 


PRINT n 
print numbers up to n-1 in reverse order. 


The only change that needs to be made to the previous program is to 
switch lines 120 and 130. (Program 6.3). These two programs are 
examples of what is sometimes called ‘unary recursion’ — a problem 
is broken down into one easier version of itself together with 
straightforward operations such as PRINT. 

A simple example of ‘binary recursion’. where a problem is 


10 INPUT n 
20 PROCprintupto(n) 
30 END 


100 DEF PROCprintupto(n) 
110 IF n = 0 THEN ENDPROC 
120 PROCprintupto(n-1) 
130 PRINT n 

140 ENDPROC 


Program 6.2 Recursively printing the numbers from 1 to n. 


10 INPUT n 
20 PROCprintupto(n) 
30 END 


100 DEF PROCprintupto(n) 
110 IF n = QO THEN ENDPROC 
120 PRINT n 

130 = =PROCprintupto(n-1) 


140 ENDPROC 


Program 6.3 Printing the numbers from 1 to n in reverse. 
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broken down into two simpler versions of itself, is provided by an 
alternative approach to printing the first n integers (Program 6.4). 
We can define a procedure that prints the integers in a given range. 
For example, 


PROCprintbetween(3,7) 
will print the integers 3, 4, 5, 6, 7. 
PROCprintbetween(4,4) 


will print the single integer 4. This procedure could be used to print 
the positive integers up to n by calling 


PROCprintbetween(1,n) 


PROCprintbetween can be defined using binary recursion if we 
break down the problem of printing a given sequence into: 


print the first half of the sequence 
print the second half of the sequence 


If only one value is to be printed, this breakdown will not be needed. 
Again, we leave a detailed study of what happens when this pro- 
gram is run until the next section. For the time being, note that it is 
vital when writing recursive programs that variables should be 
declared to be LOCAL wherever appropriate. The reasons for this 
are discussed in the next section. 

The problem of printing the first n integers is, of course, a rather 
trivial problem. We finish this section with a simple recursive pro- 
gram that could not be so easily written without recursion. The 
problem we consider is that of printing a given positive integer in 
binary. For example, 


PROCbinaryprint(5) 
should display 


10 INPUT max 
20 PROCprintupto(max) 
30 END 


100 DEF PROCprintupto(n) 
110 PROCprintbetween(1,n) 
120 ENDPROC 


130 DEF PROCprintbetween(i,j) 

140 LOCAL mid 

150 IF i=j THEN PRINT i : ENDPROC 
160 mid = Cit+j) DIV 2 

170 = PROCprintbetween(i ,mid) 

180 PROCprintbetween(mid+1,j) 

190 ENDPROC 


Program 6.4 Using ‘binary recursion’ to print the numbers between two values. 
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1 
1 
0 remainders in 
fe) reverse order 
1 give 
1 10110011 
0 
1 
remainders 
101 
and 
PROCbinaryprint(179) 
should display 
10110011 


The easiest way to convert an integer into binary is to keep 
dividing by 2 and collect all the remainders. The remainders repre- 
sent the bits required, but they are generated in reverse order 
(Figure 6.1). 

One way of programming this process without recursion would 
be to store the remainders in an array and print them out only when 
the repeated division has terminated with zero. With recursion, the 
solution is considerably simpler. We break down the problem of 
printing the number n in binary: 


print n DIV 2 in binary 
PRINT ; n MOD 2; 


where ‘n MOD 2’ is the last bit of the number. (Program 6.5). 

You might like to experiment with the effect of omitting some of 
the semicolons in this program. Changing line 110 affects only the 
first bit of the number printed while changing line 130 affects all the 
other bits apart from the first one. 

Another experiment worth trying is to replace the stopping condi- 
tion at line 110 with 


110 IF n=O THEN ENDPROC 


10 INPUT "Integer to be expressed in binary", int 
20 PROCbinaryprint(int) 

30 PRINT 

40 END 


100 DEF PROCbinaryprint(n) 

110 IF n<2 THEN PRINT ;n; : ENDPROC 
120 PROCbinaryprint(n DIV 2) 

130 PRINT ; n MOD 2; 

140 ENDPROC 


Program 6.5 Printing a number in binary. 


Figure 6.1 

Converting a number into 
binary by successive division 
by 2 
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The program will then work correctly in all cases except when the 
original input value is 0. Taking no action on a zero parameter is 
correct if the case ‘n=0’ arises as a ‘subproblem’. We do not want to 
print a leading zero at the start of a non-zero number. However, if 
the original number is zero, then this number must be printed. We 
must ensure that our procedure correctly handles the case where 
the stopping condition is true on the first call of the procedure as 
well as the case where it is true for a subproblem. 


6.3 HOW IT WORKS 
We start this section by introducing a model — the ‘tree of procedure 


10 height=600:width=1000 
20 MODE 4 

30 PROCdrawhouse 

40 k=GET : MODE 7 

50 END 


60 DEF PROCdrawhouse 
70 PROCdrawfront 
80 =PROCdrawroof 

90 ENDPROC 


100 DEF PROCdrawfront 

110 PROCdrawbox(0,0,width,height) 
120 PROCdrawwindows 

130 PROCdrawdoor 

140 ENDPROC 


150 DEF PROCdrawwindows 

160 LOCAL ww,wh 

170) =o ww=2*width/10 : wh=height/3 
180 PROCdrawbox(ww/2,wh,ww,wh) 
190 PROCdrawbox (7*ww/2,wh ,ww,wh) 
200 ENDPROC 


210 DEF PROCdrawdoor 
220) =PROCdrawhox(4*width/10,0,width/5,height*2/3) 
230 ENDPROC 


240 DEF PROCdrawbox(x,y,w,h) 
250 MOVE x,y 

260 PLOT 1,0,h:PLOT 1,w,0 
270 = PLOT 1,0,-h:PLOT 1,-w,0 
280 ENDPROC 


290 DEF PROCdrawroof 

300 MOVE O,height 

310 PLOT 1,width/2,height/3 
320 =PLOT 1,width/2,-height/3 
330 ENDPROC 


Program 6.6 House drawing program used to illustrate the idea of a tree of procedure calls. 
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PROCdrawhouse 


First: PROCdrawfront Then: PROCdrawroof 


calls’ — that will be valuable in understanding the behaviour of 
recursive programs. To introduce this model, we first look at a 
program, Program 6.6, that involves procedures, but no recursion. 
This program draws a simple house and is a much simplified ver- 
sion of Program 1.8. The process of drawing a house is broken down 
into the process of drawing a ‘front’ and then drawing a roof. This is 
illustrated in Figure 6.2. PROCdrawroof is defined in terms of 
primitive operations, MOVE and DRAW, but PROCdrawfront is 
broken down into further ‘subproblems’. (Figure 6.3). 
PROCdrawbox is primitive, but PROCdrawwindows and 
PROCdrawdoor are themselves defined in terms of other procedure 
calls. We can represent all this information as a complete ‘tree of 
procedure calls’ for the program, together with arrows representing 
the ‘flow of control’ through the program. (Figure 6.4). 

Notice in this example that PROCdrawbox is obeyed on several 
different occasions with different sets of parameters. Each time it is 
used, this procedure behaves differently. However one call of 
PROCdrawbox is terminated before another is activated. 

Now let us consider the behaviour of the first recursive program 
of the last section. We can illustrate the behaviour of this program 
for a call of 


PROCprintupto(3) 


by the ‘tree’ of procedure calls shown in Figure 6.5. (The tree has 
only one branch at each level because we are using unary recursion.) 
Like PROCdrawbox, PROCprintupto is called at several points with 
a different parameter each time. The only difference is that succes- 
sive calls of PROCprintupto take place before the previous call has 
finished. The easiest way to understand what is happening is to 
imagine a separate copy of the procedure being created each time it 
is called. Of course, such copying would be extremely wasteful of 
computer store (and time) and recursion is organised much more 
efficiently behind the scenes. Only the storage space for parameters 
and local variables need be copied when a procedure is called. 


PROCdrawfront 


Figure 6.2 
First level procedure calls by 
PROCdrawhouse 


Figure 6.3 
Procedure calls made by 


First: PROCdrawbox (0,0,1000,600) Then: PROCdrawwindows Then: PROCdrawdoor PROCdrawfront 
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PROCdrawhouse 


PROCdrawfront PROCdrawroof 


~~ 


PROCdrawbox (0,0,1000,600)! PROCdrawwindows PROCdrawdoor 


ZN SS 


PROCdrawbox (100,200,200,200)! PROCdrawbox (700,200,200,200) PROCdrawbox (400,0,200,400) 


Figure 6.4 However, in appreciating how a recursive procedure works, it is 
Full tree of procedure calls for + convenient to imagine the whole procedure being copied. We shall 
PROCdrawhouse refer to these copies of a procedure as ‘activations’ of the procedure. 
We can expand the above tree of procedure calls in more detail: 
(Figure 6.6). 
Now let us consider the behaviour of PROCprintbetween, the 
procedure that used binary recursion. In this program, a call of 


PROCprintupto(5) 
results in a call of 


PROCprintbetween(1,5) 
This executes the following: 


mid = (1+5) DIV 2 i.e. mid = 3 
PROCprintbetween(1,3) 
PROCprintbetween(4,5) 


Each of the two recursive calls of PROCprintbetween behave in a 
similar way. You should now be able to follow the arrows through 
the tree in Figure 6.7 and see exactly how the sequence of procedure 


PROCprintupto (3) 


// 


PROCprintupto (2) 


PROCprintupto (1) 
Figure 6.5 
A non-branching tree for 
PROCprintupto PROCprintupto (0) 
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PROCprintupto (3) 
CC END 
DEF PROCprintupto (3) 


PROCprintupto (2) 


PRINT 3 
ENDPROC 
DEF PROCprintupto (2) 


PROCprintupto (1) 
PRINT 2 
ENDPROC 


DEF PROCprintupto (1) 


‘PROCprintupto (0) 
PRINT 1 
ENDPROC 
Figure 6.6 
DEF PROCprintupto (0) Detailed behaviour of 


ENDPROC PROCprintupto 


calls results in the numbers being printed in the required order. 
Note the importance of declaring ‘mid’ to be LOCAL to 
PROCprintbetween. This results in each recursive call of the pro- 
cedure having its own private variable called ‘mid’. Changing the 
value of this variable does not affect the current value of ‘mid’ in 
other activations or copies of the procedure. Thus, for example, 
when the activation PROCprintbetween(1,3) is terminated, control 
returns to PROCprintbetween(1,5) and the value of ‘mid’ in that 
procedure activation is still set to 3. The other procedure activations 
that have been obeyed since setting that value each used different 
storage locations for holding their LOCAL value for ‘mid’. The value 


Printbetween (1,5) 
mid = 3 


Printbetween (1,3) Printbetween (4,5) 


Printbetween (1,2)  Printbetween (3,3) Printbetween (4,4) Printbetween (5,5) 


mid = 1 PRINT 3 PRINT 4 PRINT 5 
a \ Figure 6.7 


Printbetween (1,1) Printbetween (2,2) Tree of procedure calls for 


PRINT 1 PRINT 2 PROCprintbetween 
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‘mid = 3’ is needed in PROCprintbetween(1,5) for calculating the 
first parameter of the next recursive call (at line 180 of the program). 


6.4 RECURSIVE FLOOD-FILL ALGORITHMS AND PROBLEMS 
WITH RECURSION 


The first application of recursion in computer graphics that we shall 
examine is the use of recursion to define flood-fill algorithms of the 
type introduced in Chapter 2. For the programmer who is at home 
with recursion, the recursive version of these algorithms are much 
easier to write than the queueing algorithms used in Chapter 2. 
However, on a micro, recursive flood-fill algorithms tend to require 
too much storage space. We introduce them here because they are 
interesting applications of recursion and also because they illustrate 
common problems that can arise when using recursion on a small 
computer. 


Simple recursive colour fill — excessive recursive depth 

Recall that the first colour fill algorithm of Chapter 2 started from an 
arbitrary point in the region and worked outwards from that point 
to adjacent points, eventually visiting the whole region. We can 
very easily describe a recursive procedure for colour filling a 
4-connected region (Program 6.7). 

This is certainly much shorter than the equivalent procedures in 
the program in Chapter 2. Now that we are familiar with recursion, 
the recursive version is also conceptually easier. If, however, you 
insert the above procedure in a program and run it, you will find 
that it will work only for very small regions. For larger regions, the 
program will terminate with the error message ‘No room’. This is 
because a long sequence of recursive procedure calls has been 
entered and not yet terminated. To see how this happens, look at 
the configuration of pixels in Figure 6.8. If we start the fill process by 
calling PROCfillfrom with parameters that specify pixel 1, then the 
tree of procedure activations in Figure 6.9 is created. This process 
will continue, and as the pixels in the region are visited, the tree of 
procedure activations will get deeper and deeper. A procedure call 
will be terminated only when a dead end is encountered, for ex- 
ample at pixel 4. Each time a procedure is activated, storage space is 


200 DEF PROCfiLLfrom(x,y) 
IF POINT(x,y)>0 THEN ENDPROC 


210 
220 
230 
240 
250 
260 
270 


PLOT 69,x,y 


PROCTiLLfrom(x,y+4) 
PROCfiLLfrom(x,y-4) 
PROCfILLfrom(x+4,y) 
PROCfiLLfrom(x-4,y) 


ENDPROC 


Program 6.7 A simple recursive colour fill procedure (works only for tiny regions). 
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used up for holding parameters, local variables and a record of 
where to return to when the procedure is terminated. This space is 
freed only when the procedure terminates. There is thus a limit to 
the depth to which the recursion can be extended, and for a region 
of any size the limit will soon be encountered. Notice also that, in 
this example, when a long chain of recursive calls is eventually 
terminated, most of the other recursive calls that then take place will 
be unnecessary and will terminate immediately. This redundancy 
is, however, necessary if the algorithm is to cater for a convoluted 
region. On a large processor with virtually unlimited storage space, 
the simple recursive algorithm might be usable, but on a micro, it is 
rather unsatisfactory. 

The general point illustrated by this example is that recursion 
must not be allowed to proceed to any great depth. 


Using horizontal fill - hidden loop nesting 
As we have already seen in the last section the simple recursive 
approach to colour-fill leads to problems involving the depth of the 


fillfrom ( @) ) 


Figure 6.8 
A simple configuration of 
pixels within a boundary 


Figure 6.9 

Tree of procedure calls 
generated when filling the 
pixels in Figure 6.8 
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5 DIM CPblock 8 


recursion and the queue method introduced in Chapter 2 is ob- 
viously preferable. In this section we examine an alternative recur- 
sive approach that uses the horizontal fill facilities. Although this 
also involves a common problem with recursion, this new problem 
can be easily overcome. 

We now present a recursive version of PROCfillfrom which could 
be used in place of previous versions of the same procedure, but 
which makes use of horizontal fill. The procedure is given a point, 
and starts by filling the horizontal strip in which the point specified 
by its parameters lies. It then calls itself recursively to fill from each 
pixel above and below the strip that has just been filled. A first 
attempt at this procedure is shown in Program 6.8. 

Note that ‘ystep’ is the height of a pixel. In MODE 1, ‘ystep=4’. If 
we run our colour filling program with this version of PROCfillfrom, 
we again find that it will only work for small regions. With larger 
regions the program terminates with the message “Too many FORs’. 
This usually means that too many FOR statements have been nested 
inside each other. A common cause of this error message is the 
omission of a NEXT statement. In our case, there are no explicitly 
nested FOR statements, but because the recursive procedure calls 
appear inside a FOR statement, any FOR statement entered during 
a recursive call behaves as if it were inside the outer FOR statement. 
The limit on the number of nested FOR statements is 10 and if the 
recursive depth goes beyond 10, as it will for a larger region, then 
the program will fail. Unfortunately the only satisfactory solution is 
to replace the FOR loop with an equivalent GOTO loop (Program 
6.9). 


200 DEF PROCfiLLfrom(x,y) 

210 LOCAL leftx,rightx,scanx 

220 IF POINT(x,y)>0 THEN ENDPROC 
230 = PROCfillalong(x,y) 


240 FOR scanx = leftx 


TO rightx STEP xstep 


250 PROCfilLLfrom(scanx,y+ystep) 
260 PROCfiLLfrom(scanx,y-ystep) 


270 ~=NEXT scanx 
280 ENDPROC 


300 DEF PROCTfillalong(x,y) 


310 PLOT 77,x,y 


320 3 3=X%=CPblock : Y%=CPblock DIV 256 
330 AZ=&0D =: CALL &FFF1 

340 leftx=!CPblock MOD 65536 

350 rightx=!(CPblock+4) MOD 65536 


360 ENDPROC 


Program 6.8 Using the horizontal fill facility in a recursive colour fill procedure (tiny regions only). 
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Boundary 


This row has just been filled 


Even with this alteration the algorithm can still be improved. 
Notice that many of the recursive calls will be completely unnecess- 
ary. For example, once a line of pixels has been filled, the first 
recursive call of PROCfillfrom on the adjacent row will in most cases 
be sufficient and the remaining recursive calls will terminate 
immediately. Any additional recursive call from the adjacent row 
will only occasionally be necessary. For example, in the situation 
shown in Figure 6.10, at least two recursive calls at pixels marked X 
are necessary on the row above the one that has just been filled, so 
as to initiate filling of the two concavities opening off the lower row. 
Similarly many recursive calls involve looking back at pixels in rows 
already visited and again this is only occasionally necessary. 

An interesting adjustment to the program which will allow you to 
see which points are being visited for a second or third time, is to 
replace the line that recognises points that need not be filled by: 


220 IF POINT(x, y) > O THEN PLOT 70, x, y =: ENDPROC 


This will invert the colour of any pixel that is already colour-filled 
and you will be able to observe the progress of the algorithm not 
only as it fills the background region, but also as it makes unnecess- 
ary recursive calls in areas that have already been filled. All of these 
drawbacks are eliminated in Program 6.10. Colour Plate 3 shows the 
various colour fill algorithms in action. 

Finally, note that all recursive colour filling algorithms can run out 
of room for large or highly convoluted regions. The horizontal 
queueing fill method described in Chapter 2 is generally more 
satisfactory for use on a micro with limited memory. 


200 DEF PROCfilLfrom(x,y) 

210 LOCAL leftx,rightx,scanx 

220 ~=IF POINTCx,y)>0 THEN ENDPROC 
230 = PROCFillalong(x,y) 

240 ~=scanx=leftx 


250 PROCfilLfrom(scanx,y+ystep) 
260 PROCTil lL from(scanx,y~-ystep) 
270 scanx=scanxt+xstep 


280 IF scanx<=rightx GOTO 250 
290 ENDPROC 


Figure 6.10 

Filling a convoluted region 
with a horizontal fill 
algorithm 


Program 6.9 Version of Program 6.8 that eliminates the ‘too many FORs’ problem. 
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200 DEF PROCfiLLfrom(x,y) 
210 LOCAL leftx,rightx,nextx,backx 
220 IF POINT(x,y)>0 THEN ENDPROC 
230 PROCfillalong(x,y) 


240 nextx = leftx 


241 PROCfiILLfrom(nextx,ytystep) 
242 PROCfindback(nextx,yt+tystep) 
243 nextx=backx+xstep 


244 IF nextx<=rightx THEN GOTO 241 


250 nextx = leftx 


251 PROCfiLLfrom(nextx,y-ystep) 
252 PROCf indback(nextx,y-ystep) 
253 nextx=backx+xstep 


254 IF nextx<=rightx THEN GOTO 251 


290 ENDPROC 


300 DEF PROCfillalong(x,y) 


310 PLOT 77,x,y 
320) 3=6X%=CPblock : 


Y%=CPblock DIV 256 


330 AZ=80D =: CALL &FFF1 
340 Leftx=!CPblock MOD 65536 
350 3=rightx=!(CPblock+4) MOD 65536 


360 ENDPROC 


370 DEF PROCfindback(x,y) 


380 PLOT 92,x,y 


390 = X%=CPblock : Y%=CPblock DIV 256 
400 AZ%=&80D : CALL &FFF1 
410  backx=!(CPblock+4) MOD 65536 


420 ENDPROC 


Program 6.10 Final working version of Program 6.8. 


6.5 RECURSIVE SHAPES 


Many beautiful patterns can be generated by drawing a basic shape 
and placing smaller recursive copies of the pattern at various points 
on the basic shape. We shall illustrate this technique, first of all with 
a simple recursive square pattern and then with the snowflake 
pattern or Koch flake. 


Recursive squares 
Program 6.11 creates a pattern of recursive squares. The pattern 
consists of a square, together with a recursive half-size copy of the 
complete pattern centered on each corner of the main square. 
Figure 6.11 shows the three stages in the build-up for r = 192, 
together with the complete pattern. For example, the first photo- 
graph illustrates the situation when the procedure calls in Figure 
6.12 have been activated. The last procedure call triggers the stop- 
ping condition (r<10) and terminates without drawing a square. 
At the stage reached in the second photograph, the tree of pro- 
cedure calls that have been obeyed and terminated, together with 
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20 MODE 1 

30 PROCsquare(640,512,r) 
40 k=GET:MODE 7 

50 END 


100 DEF PROCsquare(xc,yc,r) 
110 IF r<10 THEN ENDPROC 

120 LOCAL x1,x2,y1,y2 

130) 03=—-x1=xe-r:x2=xctr 

140) —-yl=yc-rsy2=yctr 

150 MOVE x1,y1 

160 DRAW x1,y2 : DRAW x2,y2 
170 = DRAW x2,y1 : DRAW x1,y1 
180 PROCsquare(x1,y1,r/2) 
190 PROCsquare(x1,y2,r/2) 
200 =PROCsquare(x2,y2,r/2) 
210 PROCsquare(x2,y1,r/2) 
220 ENDPROC 


Program 6.11 Recursive squares. 


the procedure calls that are still active, has the shape shown in 


Figure 6.13. (The active procedure calls are down the right hand 
branch.) 


Coloured squares 

Recursive shapes like the squares can often be enhanced by colour- 
ing the basic shape each time it is plotted at all recursive levels. If 
different colours are used at adjacent levels, successively smaller 
copies of the shape will appear in different colours over the larger 
copies that have already been plotted. Program 6.12 does this for the 
recursive squares (see Colour Plate 19). 


Snowflakes 

The Koch flake consists of a pattern made up of two triangles that 
form a Star of David (Figure 6.14) together with smaller Koch flakes 
centered on each point of the star and possibly another flake in the 
centre of the star. Program 6.13 draws a Koch flake and some output 
is shown in Figure 6.15a. 

There are many interesting variations that can be tried with this 
pattern. For example, the reduction factor used to determine the 
size of the smaller flakes can be varied. In Figure 6.15b, this was 
done and the central recursive flake was omitted (by leaving out the 
last recursive call in the definition of PROCflake). Using a different 
reduction factor for the central flake can also be effective (Figure 
6.15c). Another interesting variation is to use two different reduc- 
tion factors, one for the small flakes on the points of one of the 
triangles, and the other for the small flakes on the points of the other 
triangle. This replaces the sixfold symmetry with threefold 
symmetry. 
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Figure 6.11 
Building up a pattern of 
recursive squares 


Figure 6.12 

Tree of procedure calls in 
early stages of build-up of 
recursive square pattern 


square (640,512,192) 


square (448,320,96) 


square (352,224 ,48) 


square (304,176,24) 


square (280,152,12) 


square (268,140,6) 
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square (690,512,192) 


ACTIVE 


square (448,320,96) square (448,704,96) 


(Sido duds 


Finally, using colour in the same way as it was used in the Figure 6.13 
recursive squares earlier produces striking effects. The result of Shape of tree of procedure 
using white only for colour fill is illustrated in Figure 6.15d. The calls during build-up of 
result of changing colour at each recursive level is illustrated in recursive square pattern 
Colour Plates 20 and 21. Program 6.14 produces coloured Koch 
flakes. 


6.6 REPTILES 


In Chapter 5, we mentioned the subject of replicating tiles or ‘Tep- 
tiles’. These are tiles that can be tesselated into bigger and bigger 


20 MODE 1 : colours=3 

25 VDU 19,0,7,0,0,0, 19,3,0,0,0,0 
30 PROCsquare(640,512,r,0) 

40 k=GET:MODE 7 

50 END 


100 DEF PROCsquare(xc,yc,r,col) 
110 IF r<&4 THEN ENDPROC 

120 LOCAL x1,x2,y1,y2,newcol 

130) = x1=xe-r:x2=xctr 

140) = -y1=ye-r:y2=yctr 

145 GCOL 0,col+1 

150 MOVE x1,y1 

160 DRAW x1,y2 : PLOT85, x2,y1 
170 = PLOT 85,x2,y2 

175 newcol=(col+1)MOD colours 
180 PROCsquare(x1,y1,r/2,newcol) 
190 PROCsquare(x1,y2,r/2,newcol) 
200 PROCsquare(x2,y2,r/2,newcol) 
210 =PROCsquare(x2,y1,r/2,newcol) 
220 ENDPROC 


Program 6.12 Colour filled recursive squares. 
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Figure 6.14 
Star of David pattern from 
which Koch flake is 
developed 
copies of themselves. Now that we have recursion as a tool such 
shapes are easily produced. 
Triominoes 
Figure 5.6 showed how a simple triomino can be used as a reptile 
and Program 6.15 was used to produce these pictures. 
PROCtriomino is given x-y coordinates for the bottom left hand 
corner of the triomino shape and the overall size ‘s’ of the shape to 
be drawn (s is the length of the longest side). Because a triomino 
may have to be drawn in several different orientations, we include 
four parameters (‘a’,’b’,’c’,‘d’) that represent a simple transforma- 
10 cos30=COS(RAD(30) ) 
20 resolution=8 : reductionfactor=1/3 
30 MODE 0 
40 PROCf lake(640,512,256) 
50 END 
60 DEF PROCflake(x,y,r) 
70 IF r<resolution THEN ENDPROC 
80 LOCAL x1,x2,y1,y2,y3,y4,newr 
90 = x1=x-r*cos30 : x2=x+r*cos30 
100 yl=y-r : y2=y-r/2 : y3=ytr/2 : y4=ytr 
110 MOVE x1,y2 : DRAW x,y4 : DRAW x2,y2 : DRAW x1,y2 
120 MOVE x,y1 : DRAW x1,y3 : DRAW x2,y3 : DRAW x,y1 
130 = =newr=r*reductionfactor 
140 PROCflake(x1,y2,newr) 
150 PROCflake(x, y4,newr) 
160 PROCflake(x2,y2,newr) 
170 =PROCflake(x, y1,newr) 
180 PROCflake(x1,y3,newr) 
190 =PROCf Lake(x2,y3,newr) 
200 PROCflake(x, y, newr) 
210 ENDPROC 


Program 6.13 Koch flake. 
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tion matrix (Chapter 3). This matrix specifies the orientation of the 
shape. 

If the size of shape specified to PROCtriomino is less than the 
value ‘maxtilesize’ then a single triomino is drawn in the appro- 
priate orientation. Otherwise, four recursive calls of PROCtriomino 
are used to draw four smaller triominoes that together will make up 
the triomino shape required. Drawing these smaller triomino 
shapes may involve further recursive calls. 


Sphinx tiles 

Figure 5.7 showed examples of tesselations with the Sphinx tile. 
These photographs were produced using Program 6.16. The overall 
structure of the program is the same as that of Program 6.15 
(triominoes). Here, the size of the Sphinx shape ’s’ is given as the 
length of the shortest side of the shape as this makes the coordinate 
geometry a little more convenient. 


Figure 6.15 
A selection of Koch flakes 
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10 cos30=COSCRAD(30)) 

20 resolution=8 : reductionfactor=0.4 
30 MODE 1 : colours=3 

40 PROCflake(640,512,256,0) 

50 END 


60 DEF PROCflake(x,y,r,col) 

70 IF r<resolution THEN ENDPROC 

80 LOCAL x1,x2,y1,y2,y3,y4,newr ,newcol 

90 =x1=x-r*cos30 : x2=xtr*cos30 

100 ytl=y-r : y2=y-r/2 : y3=ytr/2 : y4=ytr 
105 GCOL 0,col+1 

110 MOVE x1,y2 : MOVE x,y4 : PLOT 85, x2,y2 
120 MOVE x,y1 : MOVE x1,y3 : PLOT 85, x2,y3 
130 =newr=r*reductionfactor 

135 newcol=(col+1) MOD 3 

140 PROCflake(x1,y2,newr ,newcol) 

150 PROCflake(x, y4,newr,newcol) 

160 PROCflake(x2,y2,newr ,newcol) 

170 ~=PROCflake(x, y1,newr ,newcol) 

180 PROCflake(x1,y3,newr,newcol) 

190 PROCf Lake(x2,y3,newr ,newcol) 

200 ~=PROCflake(x, y, newr,newcol) 

210 ENDPROC 


Program 6.14 Coloured Koch flake. 


10 MODE 0 

20 mins=300 

30 PROCtriomino(2,2,960,1,0,0,1) 
40 END 


50 DEF PROCtriomino(x,y,s,a,b,c,d) 

60 LOCAL s2,s4 

70 ~=IF s<mins THEN PROCdrawtile(x,y,s,a,b,c,d) : ENDPROC 
80 = s2=s/2 : s4=s/4 

90 =PROCtriomino(x,y,s2,a,b,c,d) 

100 PROCtriomino(xta*s4tb*s4, yt+cxs4td*s4, s2, a,b,c,d) 
110 PROCtriomino(xt+tb*s, y+td*s, s2, c,d,-a,-b) 

120 PROCtriomino(xta*s, yt+tc*s, s2, -c,-d,a,b) 

130 ENDPROC 


140 DEF PROCdrawtile(x,y,s,a,b,c,d) 

150 LOCAL x1,y1,x2,y2 

160 x1=b*s : yl=d*s 

170 x2=a%*s : y2=c*s 

180 MOVE x,y 

190 DRAW x+x1,y+ty1 =: DRAW x+x1+x2/2,y+y1ty2/2 

200 = DRAW xtx1/2+x2/2,yt+y1/2+y2/2 : DRAW x+x1/2+x2,yty1/2ty2 
210 DRAW x+x2,y+y2 : DRAW x,y 

220 ENDPROC 


Program 6.15 Triominoes. 
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6.7 SPACE FILLING CURVES AND FRACTALS 


There are a large number of ‘curves’ that are variously described as 
‘space filling curves’ or ‘fractals’. The term ‘fractal’ has been recently 
coined to describe curves or surfaces that become more and more 
discontinuous the more closely we examine them. In computer 
graphics fractal surfaces have been used successfully to simulate 
natural landscapes. The more accurately we decide to plot a fractal 
curve, the longer it gets! Many naturally occurring curves and 
surfaces are fractals. For example, a sponge is a fractal surface, as is 
the surface of the Earth. 

A coastline is a commonly quoted example of a naturally occur- 
ring fractal curve. Imagine approaching the planet from outer space. 
At first sight, a coastline would appear to be a fairly smooth curve. 
As we approach closer, indentations that were not previously 
apparent would begin to appear. As we come closer still, we would 
discover that the sides of these indentations themselves contained 
further irregularities. This increase in irregularity with every in- 
crease in resolution could continue down to the level of individual 
grains of sand and even down to the atomic structure of matter 
itself. 


10 root3=Sar (3) 

20 MODE 0 

30 mins=50 

40 PROCsphinx(66,166,384,1,0,0,1) 

50 END 

60 DEF PROCsphinx(x,y,s,a,b,c,d) 

70 LOCAL s2 

80 IF s<mins THEN PROCdrawti le(x,y,s,a,b,c,d) :ENDPROC 

90 =s2=s/2 

100 PROCsphinx(xta*s*3/2, y+cxs*3/2, s2, -a,b,-c,d) 
110 PROCsphinx(x+a%s*3, y+c*s*3, s2, -a,b,-c,d) 

120 PROCsphinx(xt+a*stb*s*root3, yt+tcxstd*s*root3, s2, 

-a/2-b*root3/2, a*root3/2-b/2, -c/2-d*root3/2, 

cxroot3/2-d/2) 


130 = PROCsphinx(x+a*st+b*s*root3/2, y+cxstd*s*root3/2, s2, 


a,-b,c,-d) 
140 ENDPROC 


150 DEF PROCdrawti le(x,y,s,a,b,c,d) 
160 LOCAL x1,y1,x2,y2 

170 x1=b*s*root3/2 : yl=d*s*root3/2 
180 x2=a%*s : y2=c%s 

190 MOVE x,y 


200) =DRAW x#+2*x14+x2,y+2*y1+y2 : DRAW x+x1+3%x2/2,yty1t+3%y2/2 


210 =DRAW x+x14+5%*x2/2,yty1+5*y2/2 : DRAW x+3*x2,y+3*y2 
220 = DRAW x,y 
230 ENDPROC 


Program 6.16 Sphinx tiles. 
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Figure 6.16 
Sierpinski curves of orders 1 
to 4 


When we draw a map of a coastline, the amount of detail that we 
can show depends on the scale of the map. Irregularities that would 
not appear on a small scale map would have to be included at a 
larger scale. 

In this section, we look at a number of fractal curves that can be 
easily described recursively. In common with the coastline de- 
scribed above, all of these curves share the property that, the more 
accurately they are plotted, the more variations will appear. The 
extent to which we can do this is of course limited by the resolution 
of our computer and our television monitor. There will be a stage 
beyond which any attempts at greater accuracy will simply over- 
write pixels that have already been plotted. 

We first look at curves in which the variations are highly regular. 
Later, we will show how the introduction of some degree of ran- 
domness allows us to use some of these curves to simulate the 
random variations in a coastline. 
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100 DEF PROCsierpinski(n,x,y) 
120 IF n=0 THEN Draw a diamond and finish. 


130 k = horizontal and vertical distances to the centres 


of the four subcurves 
140 PROCsierpinski(n-1,x-k,y-k) 
150 PROCsierpinski (n-1,x-k,y+k) 
160 PROCsierpinski(n-1,x+k,y+k) 
170 PROCsierpinski(n-1,x+k,y-k) 
180 Join these four subcurves at the centre. 
230 ENDPROC 


Program 6.17 Outline recursive procedure for drawing a Sierpinski curve. 


Sierpinski curves 
Figure 6.16 shows the Sierpinski curves of orders 1 to 4. It is 
convenient to define a Sierpinski curve of order 0 which consists of a 
diamond (or a square rotated through 45°). Notice that each of these 
curves could be drawn as a continuous line, without lifting pencil 
from paper. We shall look at two ways of drawing these curves, 
where the second method draws the curve as a continuous line. 
The first method is conceptually a little easier and for this 
approach, we must first recognise that the Sierpinski curve of order 
1 consists of four order 0 curves ‘joined’ at the centre. Similarly the 
order 2 curve consists of four order 1 curves joined at the centre. In 
general, an order n curve consists of four order n—1 curves joined at 
the centre. Note that when four subcurves are joined, this involves 
deleting four diagonal lines from the subcurves and joining the 
subcurves with two horizontal and two vertical lines. This suggests 
the outline given in Program 6.17 fora recursive procedure to draw a 
Sierpinski curve of order n, centred at (x, y). In order to fill out this 
procedure, we need to examine the geometrical details fairly 
carefully. Any curve of order 1 or more consists of repeated copies of 
the same basic shape and we shall name the various dimensions of 
this basic shape as in Figure 6.17. ‘h’ is the smallest increment that 
will be required in our DRAW or MOVE statements. Thus the 
statements needed to draw a curve of order 0 (a diamond) centred at 
(x,y) are: 


VEEN 


Figure 6.17 
Dimensions of the basic shape 
in a Sierpinski curve 
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Figure 6.18 
Dimensions at the centre of a 
Sierpinski curve of order n 


MOVE x-h, y 
DRAW x, yth : DRAW xth, y 
DRAW x, y-h : DRAW x-h, y 


The distance from the centre of a curve of order n to the centre of one 
of its subcurves of order n—1 is 2*n*h. To convince yourself of this, 
you should mark the various distances on curves of different orders. 

Finally the situation at the centre of a curve of order n, when the 
four subcurves of order n—1 have been drawn, can be illustrated as 
shown in Figure 6.18. 

We need to delete the four dotted diagonal lines and draw the 
dotted vertical and horizontal lines. This can be easily accomplished 
by drawing round the dotted polygon using alternate PLOT 9 and 
PLOT 11 commands. These are relative plots, in the foreground and 
background colour respectively, which do not affect the last point 
visited on the line. Program 6.18 is the complete program. 

Note the use of INT at line 30 which ensures that the increment ‘h’ 
used in all the PLOTs is an integer. In programs that involve 
sequences of relative plots, it is always advisable to ensure that the 
increments used are integers as the graphics ‘current point’ is 
recorded internally as a pair of integer coordinates. Use of real 
increments in relative plots can result in an accumulation of errors 
that cause misalignments in the display produced. You can see this 
effect by removing INT at line 30. An even better alternative would 
be to use an integer variable (with a %) throughout the program. 

It is interesting to look at an alternative approach to drawing the 
Sierpinski curves by drawing the curve as a continuous line. This is 
the approach that would have to be used if the curve were to be 
drawn on a hard copy device (where lines cannot be deleted). This 
method is based on an algorithm described by Wirth (the inventor of 
the programming language PASCAL). 

We first observe that a curve of order n consists of four compo- 
nents connected at the corners: a left component, a top component, 
a right component and a bottom component (Figure 6.19a). For 
example, in the case of the order 1 curve, we have the curve shown 
in Figure 6.19b. The procedure for drawing a Sierpinski curve of 
order n will be defined in terms of procedures for drawing its four 
components. This is PROCsierpinski(n) in Program 6.19. 
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10 CLS: INPUT TAB(O,4)"Sierpinski curve: order(1..6)",order 


20 size=(2 
order-1)*4+2 
30 h=INT(600/size) 
40 h2=h*2 
50 MODE 0 
60 PROCsierpinski (order ,640,512) 
70 k=GET:MODE 7 


80 END 

100 DEF PROCsierpinski(n,x,y) 

110 LOCAL k 

120 IF n=0 THEN 
MOVE x-h,y : DRAW x,yth : DRAW xth,y : 
DRAW x,y-h:DRAW x-h,y:ENDPROC 

130 3=k=2 

n*h 


140 PROCsierpinski(n-1,x-k,y-k) 
150 PROCsierpinski(n-1,x-k,y+k) 
160 PROCsierpinski(n-1,x+k,y+k) 
170 =©PROCsierpinski(n-1,x+k,y-k) 
180 MOVE x-h2,y-h 

190 PLOT 9,0,h2 : PLOT 11,h,h 
200 = PLOT 9,h2,0 : PLOT 11,h,-h 
210 PLOT 9,0,-h2 : PLOT 11,-h,-h 
220 =PLOT 9,-h2,0 : PLOT 11,-h,h 
230 ENDPROC 


Program 6.18 One way of drawing a Sierpinski curve. 


Now an order n component is made up of a sequence of order n-1 
components joined in a well-defined way. For example, a left com- 
ponent of order n consists of: 


a left component of order n—1 

a diagonal line 

a top component of order n-1 

a vertical line 

a bottom component of order n-1 
a diagonal line 

a left component of order n—1 


For example, with n=2, we have Figure 6.20. If n=0, the compo- 
nents are empty. Joining four empty components diagonally at the 
comers gives a diamond shape. This gives PROCleft(n) for drawing 
a left component of order n. A similar breakdown can be achieved 
for the top, right and bottom components and the complete pro- 
gram is Program 6.19. 

You should notice that there are two types of recursion involved 
in the last program. There is straightforward recursion where, for 
example, PROCleft calls PROCleft. There is also ‘hidden’ or 
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Figure 6.19 

Breakdown of a Sierpinski 
curve into left, top, right and 
bottom components: (a) order 
n curve; (b) order 1 curve 


Figure 6.20 
Composition of the ‘left’ 
component of an order 2 
Sierpinski curve 
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‘mutual’ recursion where, for example, PROCleft calls PROCtop 
which in turn calls PROCleft. 

You should run both Sierpinski programs and observe the 
differences in their behaviour. 


W-curves 

Another curve that is closely related to the Sierpinski curve is the 
W-curve suggested by Wirth. Program 6.20 draws a W-curve and 
the results appear in Figure 6.21. 


C-curves 
The C-curve is a well-known fractal curve that can be easily gener- 
ated recursively. Some C-curves are displayed in Figure 6.22 and the 
reasons for the name should be obvious. To see how it is con- 
structed, see Figure 6.23 which shows the first six generations of 
C-curves. The first generation C-curve is a straight line. The second 
generation C-curve is obtained from the first by replacing the line by 
an ‘elbow’ consisting of two equal lines at 45° to the original and at 
right angles to each other. Each generation of C-curve is obtained by 
replacing every straight line in the previous generation curve by an 
elbow. Successive elbows are placed on the same side of the curve. 
In Program 6.21, PROCccurve joins two points with a C-curve. If 
the length of the line between the two points is less than ‘resolution’ 
then the C-curve is simply plotted as a straight line. Otherwise the 


Left 


Bottom "~! 


n—1 
Top 
n—1 
Left 
n-1 
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coordinates of the ‘elbow joint’ are calculated and two recursive calls 
of PROCccurve are used to join the first point to the elbow joint, and 
to join the elbow joint to the second point. 

There are several parameters that can be varied in the C-curve 


10 MODE O 
20 INPUT TAB(O,4)"Sierpinski curve: order(1..6)",order 
30 size=(2 
order-1)*4+2 
40 h=INT(600/size) :h2=h*2 
50 MOVE 300,200+h 
60 PROCsierpinski (order) 
70 K=GET:MODE7 
80 END 


100 DEF PROCsierpinski(n) 

110 PROCLeft(n):PLOT 1,h,h 
120 PROCtop(n) :PLOT 1,h,-h 
130 = =PROCright(n):PLOT 1,-h,-h 
140 PROCbottom(n):PLOT 1,-h,h 
150 ENDPROC 


160 DEF PROCLeft(n) 

170 IF n=O THEN ENDPROC 

180 PROC Left(n-1)=:PLOT 1,h,h 
190 PROCtop(n-1):PLOT 1,0,h2 
200 = PROCbottom(n-1):PLOT 1,-h,h 
210 = PROCLeft(n-1) 

220 ENDPROC 


230 DEF PROCtop(n) 

240 IF n=O THEN ENDPROC 

250 PROCtop(n-1):PLOT 1,h,-h 
260 = PROCright(n-1):PLOT 1,h2,0 
270~=—s PROCLeft(n-1):PLOT 1,h,h 
280 =©PROCtop(n-1) 

290 ENDPROC 


300 DEF PROCright(n) 

310 IF n=0 THEN ENDPROC 

320) =PROCright(n-1):PLOT 1,-h,-h 
330 PROCbottom(n-1):PLOT 1,0,-h2 
340 PROCtop(n-1):PLOT 1,h,-h 

350 PROCright(n-1) 

360 ENDPROC 


370 DEF PROCbottom(n) 

380 IF n=0 THEN ENDPROC 

390 =©PROCbottom(n-1):PLOT 1,-h,h 
400 PROCLeft(n-1):PLOT 1,-h2,0 
410 PROCright(n-1):PLOT 1,-h,-h 
420 =PROCbottom(n-1) 

430 ENDPROC 


Program 6.19 Drawing a Sierpinski curve as a continuous line. 
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program. The resolution can be varied to determine the generation 
of curve produced. This is how the six curves in Figure 6.23 were 
generated. Figure 6.22b shows a curve joining the same two points 
as were joined in Figure 6.22a, but at a different resolution. 


MODE 0 
INPUT TAB(3,3)"W-curve: order(1..6)",order 
size=2 


Corder+1)-1 


420 
430 


h=600/size : h2=h*2 
MOVE 300,200+th 
PROCwCorder) 

K=GET :MODE7 

END 


DEF PROCw(n) 
PROCLeft(n) : PLOT 1,h,0 : PLOT 1, 
PROCtop(n) =: PLOT 1,0,-h: PLOT 1, 
PROCright(n): PLOT 1,-h,0: PLOT 1,0,-h 
PROCbottom(n):PLOT 1,0,h : PLOT 1,-h,0 
ENDPROC 


DEF PROCLeft(n) 
IF n=1 THEN PLOT 1,0,h : ENDPROC 
PROCLeft(n-1) : PLOT 1,h,0 : PLOT 1,0,h 
h 
h 


yf 


0,h 
h,0 
0 


PROCtop(n-1) =: PLOT 1,0, 
PROCbottom(n-1):PLOT 1,0,h : PLOT 1,-h,0 
PROC Left (n-1) 

ENDPROC 


DEF PROCtop(n) 
IF n=1 THEN PLOT 1,h,0:ENDPROC 
PROCtop(n-1) : PLOT 1,0,-h : PLOT 1,h,0 
PROCright(n-1):PLOT 1,h,0 
PROCLeft(n-1): PLOT 1,h,0 : PLOT 1,0,h 
PROCtop(n~1) 

ENDPROC 


DEF PROCright(n) 
IF n=1 THEN PLOT 1,0,-h:ENDPROC 
PROCright(n-1) : PLOT 1,-h,0 : PLOT 1,0,-h 
PROCbottom(n-1): PLOT 1,0,-h 
PROCtop(n-1) : PLOT 1,0,-h : PLOT 1,h,0 
PROCright (n-1) 

ENDPROC 


DEF PROCbottom(n) 
IF n=1 THEN PLOT 1,-h,0:ENDPROC 
PROCbottom(n-1): PLOT 1,0,h : PLOT 1,-h,0 
PROCLeft(n-1) +: PLOT 1,-h,0 
PROCright(n-1) : PLOT 1,-h,0 : PLOT 1,0,-h 
PROCbottom(n-1) 

ENDPROC 


Program 6.20 Drawing a W-curve as a continuous line. 


Recursion, fractals and natural patterns 


Another variation that can be tried in Program 6.21 is to vary the 
angle that the two halves of the elbow make with the line joining the 
two endpoints. (The elbow will no longer be a right angle.) This is 
done by varying the angle called ‘theta’ in the program. The results 
of doing this are shown in the second pair of pictures in Figure 6.22. 
We will be saying more about such variations later. 


Dragon curves 

Another curve in the same family as the C-curve is the ‘dragon 
curve’, so-called because its overall shape resembles a dragon. 
Figure 6.24 shows the first six generations of dragon curve. These 
are generated in a way that is very similar to the way in which the 
C-curves are generated. However, in this case, the elbows are 
placed on alternate sides of the curve. The curves in Figure 6.25 
were generated by Program 6.22 using variations in the angle, theta, 
that the sides forming an elbow make with the line they replace. 
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Figure 6.22 ; : , 
A selection of C-curves: Higher order line replacement in C-curves and dragon curves 
(a) theta = 45, resolution = The C-curves and dragon curves were generated by recursively 


15; (b) theta = 45, resolution —_ replacing a line by two equal line segments. An interesting exten- 
= 8; (c) theta = 43, resolution _ sion to this idea is to recursively replace a line by a sequence of more 


= 15; (d) theta = 47, than two line segments. Program 6.23 does this, always making its 
resolution = 1 


10 theta=45 

20 sinth=SINC(RAD(theta)) : costh=COSC(RAD(theta)) 
30 MODE O 

40 resolution=15 

50 ressq=resolution*resolution 

60 PROCccurve(450,300,830,300) 

70 K=GET:MODE 7:END 

80 DEF PROCccurve(x1,y1,x2,y2) 

90 LOCAL xdiff,ydiff,xdir,ydir,mx,my 


Program 6.21 C-curve. 
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Figure 6.23 
First six generations of 
C-curve 


Figure 6.24 
First six generations of dragon 
curve 


replacement on the same side of the curve. Some of the results are 
shown in Figure 6.26a. We have had to use a GOTO loop instead of a 
FOR loop in PROCfractal in order to avoid the error message ‘Too 
many FORs’ that can appear in some cases. 

A simple variation to Program 6.23 can be used to make line 


100 
110 


120 
130 
140 
150 
160 


xdiff = x2-x1 : ydiff = y2-y1 
IF xdiff*xdifft+ydiff*ydiff <= ressq THEN 
MOVE x1,y1 : DRAW x2,y2 : ENDPROC 
xdir=xdiff/2/costh : ydir=ydiff/2/costh 
mx=x1+xdirxcosth-ydir*sinth 
my=y1+xdirxsinthtydirxcosth 
PROCccurve(x1,y1,mx ,my) 
PROCccurve(mx ,my ,x2,y2) 


170 ENDPROC 
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Figure 6.25 

A selection of dragon curves 
(resolution = 15): (a) theta = 
43; (b) theta = 45; (c) theta = 
47; (d) theta = 49 


replacement take place on alternate sides of the curve. (PROCfractal 
needs an extra parameter whose sign indicates the side of the curve 
on which replacement should take place.) The results obtained are 
shown in Figure 6.26b. 


6.8 FRACTAL VARIATIONS - SIMULATING A COASTLINE 


In this section, we will look at ways in which we can generate fractal 
curves that simulate naturally occurring silhouettes like coastlines 
or skylines. Techniques like those we describe can be generalised to 
three dimensions and could be used for creating natural textures on 
surfaces in images generated as backgrounds in flight simulators or 
in computer assisted animation. The mathematics of fractal curves is 
extremely complex, but we do not cover this in detail. As before, we 
adopt a straightforward recursive approach. 

Natural outlines tend to connect points ina very definite way. The 
initial shape of a coastline is originally determined by the geological 
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postheta = 45 

possin=SINCRAD(postheta)) : costh=COSCRAD(postheta)) 
MODE 0 

resolution=15 

ressq=resolution*resolution 

PROCdragon(300,500,900 ,500,-postheta) 

K=GET:MODE 7:END 


DEF PROCdragon(x1,y1,x2,y2,theta) 

LOCAL xdiff,ydiff,xdir,ydir,mx,my 
IF theta>O THEN sinth=possin ELSE sinth=-possin 
xdiff = x2-x1 : ydiff = y2-y1 
IF xdiff*xxdifftydiff*ydiff <= ressq THEN 

MOVE x1,y1 : DRAWx2,y2 : ENDPROC 

xdir=xdiff/2/costh : ydir=ydiff/2/costh 
mx=x1+xdir*xcosth-ydirxsinth 
my=y1+xdirxsinthtydir*costh 
PROCdragon(x1,y1,mx,my ,postheta) 
PROCdragon(mx ,my ,x2,y2,-postheta) 

ENDPROC 


Program 6.22 Dragon curve. 


210 
220 


INPUT "Sides",sides 
theta=180/sides 

SIN=SINRADtheta : cos=COSRADtheta 
MODE O 

resolution=15 
ressq=resolution*resolution 
PROCfractal(450,300,830,300) 

END 


DEF PROCfractal(x1,y1,x2,y2) 
LOCAL xdiff,ydiff,xdir,ydir,midx,midy,prevx ,prevy ,nextx ,nexty,s 
xdiff = x2-x1 : ydiff = y2-y1 
IF xdiff*xdifftydiff*ydiff <= ressq THEN 
MOVE x1,y1 : DRAW x2,y2 : ENDPROC 
xdir=xdiff/2 : ydir=ydiff/2 
midx=x1+xdir : midy=y1t+ydir 
prevx=xdir : prevy=ydir 
s=1 
nextx=prevx*cos-prevy*sin 
nexty=prevx*sintprevy*cos 
PROCfractal (midx+nextx,midytnexty ,midxt+tprevx,midy+prevy) 
prevx=nextx : prevy=nexty 
s=st1 : IF s<=sides GOTO 170 
ENDPROC 


Program 6.23 Higher order C-curves. 


10 The art of microcmputer ... 


273 


274 ~— Art of microcomputer graphics 


cies 


IY 


Figure 6.26 

Higher order line replacement 
(a) in a C-curve (b) ina 
dragon curve 


Figure 6.27 

Recursive replacement of a 
line by an equilateral ‘elbow’ 
to generate random 
irregularities 


events that created the landmass. The action of sea and wind then 
generates random variations that are superimposed on this initial 
outline. 

What we will do here is describe how to make a program superim- 
pose realistic random variations on what is initially a very simple 
outline. We will do this by replacing successive straight line seg- 
ments in the outline by fractal curves that exhibit some randomness. 

A completely random curve could be generated by 


REPEAT: theta=RND(360) 
PLOT 1, 8*COSCRAD(theta)) ,8*SINCRAD(theta)) 
UNTIL FALSE 


However, if you try this, you will find that the curve produced 
meanders aimlessly (with so-called Brownian motion). 

We require a curve that connects two points, but exhibits random 
behaviour between the two points. To do this, we canadd a random 
element to the process that was used to generate the C-curves and 
dragon curves described earlier. The operation used to introduce 
new levels of discontinuity into these curves was to recursively 
replace a line by an ‘equilateral elbow’ where the sides of the elbow 
made an angle 6 (theta) with the line they replaced. We have found 
that the most effective way of generating a realistic ‘coastline curve’ 
that connects two points is to select theta at random at every 


6 chosen at random 
from a specified 
range 


replaced 
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10 MODE 0 

20 resolution=10 

30 ressq=resolution*resolution 

40 maxtheta=40 

50 PROCfractal(450,500,830,500) 

60 K=GET:MODE 7:END 

70 DEF PROCfractal(x1,y1,x2,y2) 

80 LOCAL xdiff,ydiff,xdir,ydir,mx,my 

90 xdiff = x2-x1 : ydiff = y2-yi1 

100 IF xdiff*xdifftydiff*ydiff <= ressq THEN 
MOVE x1,y1 : DRAW x2,y2 : ENDPROC 

110 theta=maxtheta-RND(2*maxtheta) 

120 Sinth=SINRADtheta : costh=COSRAD(theta) 

130 3 xdir=xdiff/2/costh : ydir=ydiff/2/costh 

140) = mx=x14+xdir*costh-ydirxsinth 

150) = my=y1+xdirxsinthtydir*costh 

160 PROCfractal(x1,y1,mx,my) 

170 PROCfractal (mx ,my ,x2,y2) 

180 ENDPROC 


Program 6.24 A random fractal curve. 


replacement stage. We still use an equilateral elbow (Figure 6.27). 
The range of values that theta is allowed to take determines the 
character of the coastline. Program 6.24 can be used to demonstrate 
this. It generates a random fractal curve between two points. At 
each recursive step, theta is selected randomly from the range 


- maxtheta ... + maxtheta 


Low values of maxtheta result in minor variations in direction and 
larger values result in more violent fluctuations. This is illustrated in 
Figure 6.28 where PROCfractal from Program 6.24 has been used to 
connect pairs of points for nine different values of maxtheta ranging 


Figure 6.28 

‘Coastline’ effects joining two 
points for various ranges of 
data: (values used for 
maxtheta range from 20 to 60 
steps of 5° 
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Figure 6.29 

Fractal variations on a map of 
Britain: (a) coarsely digitised; 
(b). filled in with C-curves; (c) 
maxstep = 50, maxtheta = 40; 
(d) maxstep = 30, maxtheta = 
60 


from 20° to 60°. With values of maxtheta greater than 40° or 45°, there 
is a tendency for the curve to turn back on itself. 

Figure 6.29a shows a map of Britain and Ireland that has been 
digitised fairly coarsely. Just for fun, Figure 6.29b shows successive 
points on the coast connected by C-curves. Program 6.25 was used 
to add some realistic variations to the map’s outline by generating 
random fractal curves between successive points round the coast 
and the results are shown in the last two photographs in Figure 6.29. 
The best results were obtained by using maxtheta=40 and by pro- 
ceeding round the coast in steps of about 50 units of length at a time. 

Finally, Figure 6.30 shows the results of colour filling a fractal map 
of Britain. This was generated by Program 6.26 which uses an even 
coarser digitisation than the previous one. The values used are 
contained in DATA statements. In this data, the coastline is broken 
into short runs, and, at the start of each run, we have included the 
coordinates of an interior point that can be used for triangle fill 
during that run. 
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400 
410 
420 
430 
440 
450 


maxtheta = 40 

DIM sin(maxtheta), cos(maxtheta) 

FOR a=0 TO maxtheta 
sin(€a)=SINCRAD(a)) 
cos(a)=COSCRAD(a)) 

NEXT a 

resolution = 12 

ressq = resolution*resolution 

maxstep=50 

MODE O 

mapfile = OPENINC'MAP"') 

INPUT£ mapfile, plotop,x,y 

prevx=x : prevy=y 

MOVE prevx,prevy 

REPEAT 
INPUT£ mapfile, plotop,x,y 
IF plotop=5 THEN PROCjoin(prevx,prevy,x,y) 
prevx=x : prevy=y 

UNTIL EOF£ mapfile 

CLOSE£ mapfile 

END 


DEF PROCjoin(prevx,prevy,nextx,nexty) 

LOCAL xdiff,ydiff,steps, xstep,ystep, S,x,y 
xdiff=nextx-prevx : ydiff=nexty-prevy 
steps=INT(SQR(xdi f f*xxdi fftydi ffxydiff)/maxstep) +1 
xstep=xdiff/steps 
ystep=ydiff/steps 
FOR s=1 TO steps 

x=prevxtxstep : y=prevytystep 
PROCfractal (prevx,prevy,x,y) 
prevx=x : prevy=y 
NEXT s 
ENDPROC 


DEF PROCfractal(x1,y1,x2,y2) 

LOCAL xdiff,ydiff,mx,my, theta,s,c,c2,cs 
xdiff = x2-x1 : ydiff = y2-y1 
IF xdiff*xdiff + ydiff*ydiff < ressq THEN 

MOVE x1,y1 : DRAW x2,y2 : ENDPROC 
theta=maxtheta-RND(2*maxtheta) 
IF theta<O THEN sinth=-sin(-theta) : costh=cos(-theta) 
ELSE sinth=sin(theta) : costh=cos(theta) 

xdir=xdiff/2/costh : ydir=ydiff/2/costh 
mx=x1+xdir*costh-ydir*sinth 
my=y 1+xdiresinthtydir*costh 
PROCfractal(x1,y1,mx,my) 
PROCfractal (mx ,my ,x2,y2) 

ENDPROC 


Program 6.25 Imposing fractal variations on a coarsely digitised map. 
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Fractal variations on the shape of 


Britain 


Figure 6.30 
Colour filled fractal variations 
on a map of Britain 


10 maxtheta = 40 

20 DIM sin(maxtheta), cos(maxtheta) 

30 FOR a=0 TO maxtheta 

40 = sin€a)=SINCRAD(a)) 

50 cos(a)=COSC(RAD(Ca)) 

60 NEXT a 

70 resolution = 12 

80 ressq = resolution*resolution 

90 MODE 4 

100 PRINT TABC(1,1)"Fractal variations on the shape of" 
TAB(15,2)"Britain" 

110 VDU 29,640;512; 

120 READ sections,startx,starty : MOVE startx,starty 

130 FOR sect=1 TO sections 

140 READ centrex,centrey,points 

150 FOR p=1 TO points : READ x,y : DRAW x,y : NEXT p 

160 NEXT sect 

170 FOR x=300 TO 900 STEP 600 

180 FOR y = 300 TO 700 STEP 400 


190 RESTORE 

200 VDU 29,x;y; 

210 READ sections, prevx,prevy 

220 MOVE prevx,prevy : MOVE prevx,prevy 

230 FOR sect=1 TO sections 

240 READ centrex,centrey, points 

250 PLOT 85,centrex,centrey 

260 FOR p=1 TO points 

270 READ nextx,nexty 

280 PROCfractal (prevx,prevy,nextx,nexty) 
290 prevx=nextx : prevy=nexty 

300 NEXT p 

310 MOVE prevx,prevy : MOVE centrex,centrey 


Program 6.26 Colour filling a fractal map of Britain. 
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Recursively generated trees 

Mathematically generated computer art can sometimes mean 
extracting as much variation as possible from a program by building 
into it suitable parameters for variation. The resulting variations in 
shape that are generated by the program can then be tuned to the 
desired result. This is nowhere better illustrated than in the tree 
generating program that will generate a large variety of tree-like or 
plant-like forms. 

The program is a simple example of recursion and uses the design 
statement ‘A tree is a branch witha tree on the end of it.’ To draw the 
tree we simply write a procedure that draws a branch then recur- 
sively calls itself. The variation parameters that we build into the 
program are shown in Figure 6.31, and the program is Program 6.27. 

Six design parameters are used. The first parameter, ‘rand’, is a 
randomising parameter. If it is set to 0 there is no random element in 
the program. If it is set to 1 then the angle that each branch makes 


320 NEXT sect 

330 READ centrex,centrey : PLOT85,centrex,centrey 
340 NEXT:NEXT 

350 END 


360 DEF PROCfractal(x1,y1,x2,y2) 

370 LOCAL xdiff,ydiff,mx,my, theta,s,c,c2,cs 

380 3=xdiff = x2-x1 : ydiff = y2-y1 

390 ~=Oo«IF xdiffxxdiff + ydiff*ydiff < ressq THEN 
MOVE x1,y1 : MOVE centrex,centrey : PLOT 85, x2,y2 : 
ENDPROC 

400 theta=maxtheta-RND(2*maxtheta) 

410 IF theta<O THEN sinth=-sin(-theta) : costh=cos(-theta) 

ELSE sinth=sin(theta) : costh=cos(theta) 

420 = xdir=xdiff/2/costh : ydir=ydiff/2/costh 

430) = mx=x1t+xdirxcosth-ydirxsinth 

440) my=yitxdirxsinthtydirxcosth 

450 PROCfractal(x1,y1,mx,my) 

460 PROCfractal(mx,my,x2,y2) 

470 ENDPROC 


480 DATA 8, -50,60 
490 DATA -25,75, 5, -40,75, -30,90, -10,90, -15,80, -20,70 
500 DATA -20,55, 4, -7,70, 5,70, -2,55, -10,40 
510 DATA 0,0, 7, -5,30, 0,20, 5,10, 10,0, 15,-10, 20,-20, 25,-30 
520 DATA 10,-50, 3, 35,-30, 50,-50, 40,-65 
See DATA 20,-70,12, 55,-70, 35,-75, 15,-80, -5,-85, -15,-87, 
-25,-90, 

-35,-93, -45,-95, -35,-87, -25,-80, -15,-72, -5,-65 
540 DATA 10,-50, 5, -17,-63, -30,-60, -25,-45, -20,-30, -10,-30 
550 DATA 0,0, 4, -12,-20, -15,-10, -18,0, -20,10 
560 DATA -20,55, 4, -30,10, -30,30, -40,45, -50,60 
570 DATA -25,75 
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has a random perturbation added to it. Its length is also randomly 
perturbed. This means that the program will generate different trees 
using identical design parameters. The forms will however have an 
underlying ‘sameness’, the nature of which can be seen by examin- 
ing Figure 6.32, which shows four executions of the program for 
identical parameters. Considerable aesthetic improvement results 
from the use of colour and Colour Plate 22 is the output from a 
colour version of the program. One colour is used for the branches 
and one for the tips. 

The next figure, Figure 6.33, contains three pairs of pictures. Each 
pair consists of a regular tree, together with its corresponding 
randomized version. The regular tree is generated with the ran- 
domizing parameter set to 0 and the randomized tree with the 
paramater set to 1. The remaining five parameters are identical for 
each pair. 

The significance of the remaining five design parameters can be 
understood by studying Figure 6.31. These design parameters con- 
trol the overall shape or ‘look’ of the tree. The first one is ‘branchfan’ 
and this is the angle between the first and last branches. The second 
parameter is ‘inpafact’ (input angle factor) and this determines the 
ratio between the branch angles at consecutive depths. The next 
parameter, ‘branchdensity’, is the number of branches that emanate 
froma node. ‘Inphf’ (input height factor) is the ratio between branch 
lengths at consecutive depth levels. Finally ‘depth’ is the depth of 
recursion or the number of ‘levels’ in the tree. 

The program can be further elaborated with more design parame- 


Figure 6.31 ters. For example, a finite branch thickness (proportional to branch 
Design parameters for length) could be incorporated. In the program the terminating 
recursive trees ‘leaves’ are drawn as three extra pixels — this could also be changed. 
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PROCinitialise 

MODE 1 : VDU 23,1,0;0;0;0; 

MOVE 640, 100 : GCOL 0,2 

PROCtreeCangle, branchfan, height, depth%) 


END 

DEFPROCinitialise 
INPUT rand, branchfan, inpafact, branchdensity, inphf, depth% 
angle = 90 : height = 250 

ENDPROC 


DEFPROCtree(Cangle,branchfan, height, depth) 
LOCAL i, x, y, start, theta, heightfactor 
IF depth% = O THEN 
GCOL 0,1 : PLOT 65,-2,0 : PLOT 65,2,4 : PLOT 65,2,-4 : 
PLOT 0,-2,0 : GCOLO,2 : ENDPROC 
start = angle-branchfan/2 
theta = branchfan/branchdensity 
IF depth% <= 2 THEN heightfactor 
ELSE heightfactor 
x = height*COSCRADCangle)) 
y = height*SINCRADCangle)) 
angle = start 
FOR i = 1 TO branchdensity + 1 
PLOT 1, x, y 
IF rand = 0 THEN 
PROCtree(angle, branchfan*inpafact, 
height*heightfactor, depth%-1) : 
angle = angle + theta 
IF rand = 1 THEN 
PROCtree(angle-theta/2+RND(theta), branchfan*inpafact, 
height*heightfactor*(0.5+RND(1)/1.5), depth%-1) : 
angle = angle + theta 
PLOT 0, -x, -y 
NEXT i 
ENDPROC 


inphf/2 
inphf 


Program 6.27 Recursive trees. 


A windblown tree could be drawn by making the branches have a 
tendency to lean to the right or the left. 

The structure of PROCtree is simple and calls PROCtree within 
itself. This is done in a FOR loop that controls the number of 
branches drawn at any level. The parameter ‘rand’ controls the 
selection of one out of two PROCtree calls and you can see from the 
program the way in which the parameters are randomly perturbed. 
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Figure 6.32 

Four trees generated with 
identical design parameters, 
but with the randomising 
parameter set to 1 


Figure 6.33 (opposite) 
Regular and randomised 
trees: (a) 0, 120, 0.65, 2, 0.6, 6; 
(b) 1, 120, 0.65, 2, 0.6, 6; (c) 0, 
70, 0.7, 3, 0.85, 5; (d) 1, 70, 
0.7, 3, 0.85, 5; (e) 0, 110, 0.8, 
3, 0.8, 5; (f) 1, 110, 0.8, 3, 0.8, 
5 
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7 The third dimension — 
representation 


The aim of computer graphics is to present a pictorial representation 
of reality on a display screen. The picture presented is an abstraction 
or a model of reality generated by a computer program. At one end 
of the spectrum we may be presenting convenient summaries of 
numerical information, e.g. in graphs and bar charts, and the aim 
here is to enable the user to interpret numerical information more 
easily than if he was viewing long lists of figures. At the other end of 
the difficulty spectrum is one of the most impressive computer 
graphics projects: flight simulation. Here a three-dimensional world 
is presented ona screen and the trainee flies through it. The generat- 
ing program responds to movements of the aircraft controls, speed, 
attitude etc., and changes the view of the world accordingly. This 
complex animation requires considerable hardware resources and 
although the world models are stylized to a certain extent, the 
impression of reality is astonishing. In such a model the terrain that 
the pilot is flying over is generated to a quality that is a compromise 
between the cost of the hardware and the time available to generate 
an image (1/30th of a second). 

If generation time is not critical then pictures can be generated 
that imitate reality to a degree of accuracy that is uncanny. These 
images are generated by using complex mathematical shading 
models to mimic reality. 

Yet another approach is to mix reality and abstraction. This 
technique is currently popular in TV commercials and consists of 
mixing computer generated digital images with analogue images of 
reality from a TV camera. 

Now the difference between attempting to model reality in a 
computer graphics image and two dimensional line drawings such 
as graphs and bar charts is that we must represent the third dimen- 
sion, depth, on the display screen. This immediately raises a num- 
ber of significant problems many of which are the subject of 
computer graphics research activity in institutions all over the 
world. The main problems are: 
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1. Weneed tobe able to generate and represent three-dimensio- 
nal models in a program so that they can be manipulated. 


2. We need to be able to calculate a two-dimensional mapping 
of such models so that they can be displayed on the screen. 


3. We need to take care of the hidden surface problem so that 
surfaces on an object that cannot be seen from a particular 
viewpoint are removed, and, that parts of objects obscured 
by other objects are not seen in the final display. 


4. Weneed to colour each point ona surface taking into account 
an assumed light source and such factors as texture, 
transparency and reflectivity. (See Colour Plate 6). 


In this chapter and the next two, we will concentrate on the first 
three problems. At the moment the hardware constraints of the 
home microcomputer is such that shading modelling is not practic- 
able. Even although we can set up the mathematics and calculate the 
exact colour value of a pixel we do not have the colour and spatial 
resolution to be able to display it. 

Figure 7.1 shows three models of the same three-dimensional 
solid. The first is a so-called wire frame model. Here we do not 
implement hidden surface removal or shading. The model is 
defined as a list of vertices together with connectivity information. 
A two-dimensional representation of this model, as seen from a 
particular viewpoint, can then be drawn using line graphics to join 
the vertices together. The second model is identical to the first 
except that hidden lines are removed. You can see that the in- 
terpretation of the model is now considerably enhanced. In the third 
model points on each of the visible surfaces are shaded. Each pixel 
in each surface is assigned a value or colour, taking into account the 
aforementioned factors. The final result is a careful imitation of 
reality. In fact mathematical shading models are now so accurate 
that when a three-dimensional solid is displayed on a screen of 
sufficiently high resolution it is almost impossible to tell if the 
resulting display is a real image, from a colour television camera, or 
a program generated model. 


7.1 REPRESENTATION OF THREE-DIMENSIONAL MODELS 


Three-dimensional graphics would be a simple extension of two- 
dimensional graphics, all our 3X3 transformations would become 
4x4 transformations and that would be the end of the matter, if we 
had access to a three-dimensional display device. Of course the 
display device is two-dimensional and the extra complication in 
three-dimensional graphics comes from the need to map the three- 
dimensional coordinates of the object to be displayed into the two- 
dimensional coordinates of the display system. It is convenient to 
express this as a combination of two transformations: the viewing 
transformation and the perspective transformation. This is needed 
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Figure 7.1 

The three models used in 
computer graphics: wire 
frame, wire frame with 
hidden lines removed and 
shaded surface with hidden 
surfaces removed 


a pa \ 
fray ws SSPE 
Rem ee. Ow a ae 


in addition to any other of the transformations such as scaling, 
rotation and translation of the three-dimensional object. 

We shall specify the coordinates of a three-dimensional object ina 
so-called world coordinate system. A house with a pyramidal roof 
could be specified in this system as a list of 9 (x,y,z) points in the 
world coordinate system. (Figure 7.2) 

Our intuition and visual experience with such abstractions as the 
wire frame model shown above enables us to realise the shape of the 
solid body that the model represents. Just as we would see different 
views of the real object as we moved our viewpoint around the sides 
and over the top, so we can construct two-dimensional representa- 
tions of these different views from the original wire frame model. 
(Figure 7.3) The views can be constructed from the original object by 
specifying a viewpoint in relation to the object. The so-called ‘view- 
point transformation’ converts the coordinates expressed in the 
world coordinate system into ‘eye’ coordinates expressed in a coor- 
dinate system centred at the viewpoint. 
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World coordinate 
system 


Xw Yw 


Having applied the viewpoint transformation we are still left with 
a list of three-dimensional coordinates. The transformation that 
produces a list of two-dimensional or screen coordinates from the 
viewpoint list is called the perspective transformation. These con- 
siderations together with three-dimensional manipulations that are 
analogous to the manipulations in two dimensions dealt with in 
Chapter 3 are the subject of the next chapter. For the remainder of 
this chapter we will be concerned with how we can represent three- 
dimensional structures in a program and how these can be 
generated. 

The first thing that must be borne in mind is that although a wire 
frame model is just a collection of vertices joined by edges, such a 
representation in general is not sufficient in three-dimensional com- 
puter graphics. Even although we require only the vertices and the 
connectivity information (which vertices are joined together) to 
draw a wire frame model on the screen, to remove hidden lines we 
need to consider the surfaces formed by the edges. We also need to 
consider surfaces, rather than vertices, for calculations in a shading 
model. This situation is summarised in Figure 7.4 for a wire frame 
cube. When we are performing three-dimensional linear transfor- 
mations (see the next chapter) such as scaling, for example, then we 
simply operate on the eight vertices applying the same transforma- 
tion to each. When we are plotting a wire frame model we need 
connectivity information. We need to know that to draw the cube 


Figure 7.2 
Three dimensional world 
coordinate system 


Figure 7.3 
Different views of the same 
object 
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used in plotting wire 
frame models 


Surfaces are used in hidden surface removal 


Figure 7.4 
Data entities use in computer 
graphic models Surfaces are used in shading models 
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we MOVE to vertex 1, DRAW to vertex 2, DRAW to vertex 3, etc. 
This connectivity information can be expressed, generally but 
uneconomically, by explicitly storing representations of each of the 
six surfaces. The entity of a surface is needed for hidden surface 
removal and also for shading calculations. We are therefore led toa 
hierarchical data structure that allows a body to be specified as a 
collection of surfaces, each surface to be specified as a collection of 
vertices and each vertex to be specified as a set of three coordinates 
in world coordinate space. 

A suitable data structure (Figure 7.5) is set up using two arrays 
‘surface’ and ‘vertex’. The array ‘vertex’ contains a list of the coordi- 
nates of the eight vertices in the cube, and ‘surface’ contains for each 
surface a list of vertex numbers that define the surface. This data 
structure means that we can deal with surfaces as entities. 

A surface must contain (for reasons that will become clear later) 
vertices listed in counter-clockwise order as seen from outside the 
object. Thus the surface number 2 is specified in the second row of 
array ‘surface’ which will contain the vertex numbers 2, 6, 7 and 3. 
Thus to access surface number 2 for calculation or plotting we would 
indirectly access the array ‘vertex’ as follows: 


vertex (surface(2,1)) 
vertex (surface(2,2)) 
vertex(surface(2,3)) 
vertex(surface(2,4)) 


Note that either the construction of surfaces in the object needs to be 
explicitly stated as here, or the method that constructs the solid 
must do so in such way that consecutive vertices relating to one 
surface are listed in counter-clockwise order (looking in from out- 


vertex number coordinates 

surface(1) vertex(1) 
surface(2) vertex(2) 
surface(3) vertex(3) 
surface(4) vertex(4) 
surface(5) vertex(5) 
surface(6) vertex(6) 

vertex(7) 

vertex(8) 


Data structure for surfaces 
using two arrays 
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side the object). For the cube the data structure is initialised by using 
the procedure PROCinitialise (Program 7.1). 

A not insignificant disadvantage of this method is that it is not 
easy to find surfaces that share an edge. In the cube, for example, 
each edge is shared by two surfaces. This means that when the body 
is plotted each edge will be plotted twice over and the complete 
figure will take twice as long to be drawn. This is clearly a significant 
disadvantage in such applications as animation and the significance 
of this disadvantage increases with the complexity of the model. On 
the other hand, because each vertex is stored only once, memory 
space is saved. Also it is easy to change the coordinate values of a 
vertex (because there is guaranteed to be only one occurrence of a 
vertex in the list). This is important in interactive CAD where the 
user of an interactive data entry program may want to edit his model 
by changing a vertex. 

Now this data structure must be extended in the more general 
case where different surfaces contain different numbers of vertices. 
In the ‘church with steeple’ example shown in Figure 7.6 there are 14 
surfaces and 19 vertices. Each surface contains either 3, 4, 5, 6 or 8 
vertices and we need an extra array, ‘noofvertices’ to hold this 
information. The alterations to PROCinitialise and the data struc- 
ture are given in Program 7.2. The first five data statements list the 
19 vertices and the remaining 14 data statements give the surface 
information in the order specified in Figure 7.6. The first number in 
each of these DATA statements is the number of vertices in the 
surface and this is read into array ‘noofvertices’. In this and sub- 
sequent programs in this chapter we use a standard viewpoint 


10 DIM vertex(3,8), surface(6,4) 


1000 DEF PROCinitialise 
1010 LOCAL v, vertexno,surfaceno 
1020 FOR v = 1 TO 8 


1030 READ vertex(1,v), vertex(2,v), vertex(3,v) 
1040 NEXT v 

1050 FOR surfaceno = 1 TO 6 

1060 FOR vertexno = 1 TO 4 

1070 READ surface(surfaceno, vertexno) 

1080 NEXT vertexno 


1090 NEXT surfaceno 
1100 ENDPROC 


1110 DATA 100,0,0, 100,100,0, 100,100,100, 100,0,100 
1120 DATA 0,0,0, 0,100,0, 0,100,100, 0,0, 

1130 DATA 1,2,3,4, 2,6,7,3, 3,7,8,4 

1140 DATA 6,5,8,7, 1,5,6,2, 1,4,8,5 


Program 7.1 Initialising a surface/vertex representation of a three-dimensional object (a cube). 
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transformation that allows us to plot a particular view of the three- 
dimensional solid. The procedures that perform this task should be 
accepted for the moment (they form the main topic of the next 
chapter). 

Yet another extension that must be introduced is one to cope with 
multi-object scenes. Here we can introduce another two-dimensio- 
nal array that lists the objects in the scene as sets of surfaces. This 
scheme is suggested by Figure 7.7 which shows the state of the data 
structure for the cube pyramid scene. 


7.2 GENERATION OF THREE-DIMENSIONAL MODELS — PSEUDO 
THREE-DIMENSIONAL TECHNIQUES 


We now move on to consider how three-dimensional models can be 
generated and we shall start by looking at some trivial but much 
used imitations of three-dimensional models. These are pseudo 
three-dimensional models because they are drawn by working en- 
tirely in two-dimensional coordinates. This is sometimes an accept- 


Figure 7.6 
Surfaces and vertices for the 
church 
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Figure 7.7 
Data structure for multi-object 
scene 


as already mentioned, we can use shortcuts in certain applications. 
Perspective is imitated in the usual way and hidden surface removal 
can be imitated by ‘painting’ (see below). Some generality can be 
built into the programs by using repetitions of models (suitably 
scaled) as we shall now illustrate. Again bear in mind that the 
diversity of the illustrative programs is unavoidable and the struc- 
ture of each program is just a reflection of the structure of one 
particular view of the scene. 

The first program, Program 7.3, draws pseudo three-dimensional 
spheres by drawing ellipses. PROCdrawellipse draws an ellipse 
centred at (xc, yc) and having axes a, and b respectively. When a = 0 
and b = r, a vertical straight line is drawn (an infinitely thin ellipse). 
Whena = rand b = r, acircle is drawn. To control PROCdrawellipse 
we thus need a structure that starts with a = 0 and increases a 
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towards b, in other words a FOR loop. The program thus draws 
vertically aligned ellipses that get fatter and fatter and end up as a 
circle. A similar FOR loop controls the drawing of horizontally 
aligned ellipses and the net result is a figure that gives the impres- 
sion of a sphere. Output from the program is shown in Figure 7.8. 

The second program, Program 7.4 is a three-dimensional bar 
chart that uses an easy heuristic for hidden surface removal. The 
program draws pseudo three-dimensional bars whose heights 
represent particular values. The practical application is representa- 
tion of a bivariate histogram (values are a function of two variables). 
For example, we may have data for ice cream sales together with 
date and the average temperature for that date. We could plot a 
bivariate histogram where the z-axis represented sales, the y-axis 
temperature and the x-axis the date. Each sales value is plotted 
against two variables, temperature and date, and we need a three- 
dimensional graph. 

Now because we are always going to view this model from exactly 
the same direction we can draw it in its entirety using a two- 
dimensional coordinate system. Another benefit of a fixed view- 
point is that we can adopt an easy hidden surface removal heuristic. 


10 MODE 0 
20 forever = FALSE 
30 REPEAT 


40 INPUT TAB(O,1) "Centre and radius (x,y,r)", xc,yc,r, 


TAB(O,1) SPC(60) 
50 PROCdrawsphere(xc,yc,r) 
60 UNTIL forever 
70 END 


80 DEF PROCdrawsphere(xc,yc,b) 
90 FOR a=1 TO bt1 STEP b/5 


100 PROCdrawellipse(xc,yc,a,b) 
110 NEXT a 

120 a=b+1 

130 FOR b=1 TO a+1 STEP a/5 

140 PROCdrawellipse(xc,yc,a,b) 
150 NEXT b 


160 ENDPROC 

170 DEF PROCdrawel Lipse(xc,yc,a,b) 
180 MOVE xcta,yc 

190 FOR theta=0 TO 360 STEP 10 


200 cosine=COS(RAD(theta)) : sine=SINCRAD(theta)) 
210 r=1/SQR(cosinexcosine/(a*a)+sinexsine/(b*b) ) 
220 x=r*cosine:y=r*sine 

230 DRAW xctx,ycty 


240 NEXT theta 
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250 ENDPROC 


Program 7.3 Pseudo three-dimensional spheres created using ellipses. 
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able shortcut for such applications as backdrops to arcade games. 
The limitations are obvious. The view of the scene is static, so the 
viewer cannot move around in the three-dimensional scene and the 
programming techniques are context dependent. To write a pro- 
gram to draw a particular scene the programmer simply sets up 


DIM vertex(3,19), surface(14,9), noofvertices(14) 
rho = 700: theta = 45: phi = 60 : screendist = 2000 
PROCinitviewtransform(rho,theta,phi) 
MODE O : VDU 29, 640;350; 
PROCinitialise 
FOR surfaceno = 1 TO surfs 
PROCtransform_and_plot (surfaceno) 
NEXT surfaceno 
END 


DEF PROCtransform_and_plot(surfaceno) 
LOCAL vertexno, startx,starty 
PROCscreenvertex(surfaceno,1) 
MOVE xs,ys : startx=xs : starty=ys 
FOR vertexno = 2 TO noofvertices(surfaceno) 
PROCscreenvertex(surfaceno,vertexno) 
DRAW xs,ys 
NEXT vertexno 
DRAW startx,starty 
ENDPROC 


DEF PROCscreenvertex(s,v) 
PROCviewtransform(vertex(1, surface(s,v)), 
vertex(2, surface(s,v)), 
vertex(3, surface(s,v))) 
PROCperspecttransform(xe, ye, ze, screendist) 
ENDPROC 


DEF PROCinitialise 
LOCAL v, vertexno,surfaceno 
READ verts 
FOR v = 1 TO verts 
READ vertex(1,v), vertex(2,v), vertex(3,v) 
NEXT v 
READ surfs 
FOR surfaceno = 1 TO surfs 
READ noofvertices(surfaceno) 
FOR vertexno = 1 TO noofvertices(surfaceno) 
READ surface(surfaceno, vertexno) 
NEXT vertexno 
NEXT surfaceno 
ENDPROC 


DATA 19 


Program 7.2 Representing a more complex three-dimensional object (a church). The transformations to 
project an object onto the two-dimensional screen are explained in Chapter 8. 


Three-dimensional representation 


structures to draw a particular two-dimensional visualisation or 
mapping of the scene. This is a trivialisation of the general three- 
dimensional graphics model where we set up a three-dimensional 
data structure and are then able to construct from this model any 
view of the scene. The program works out a view for us. However, 


1150 DATA 180,0,0, 180,0,50,  180,20,75,  180,20,120 
1160 DATA 180,60,120,  180,60,75, 180,80,50, 180,80,0 
1170 DATA 0,80,0, 0,0,0, 140,40,100, 140, 60, 75 
1180 DATA 0,40,100, 0,80,50, 140,20,75, 160,40,250 

1190 DATA 140,60,120, 140,20,120, 0,0,50 


1200 DATA 14 

1210 DATA 8,8,7,6,5,4,3,2,1 
1220 DATA 4,1,10,9,8 

1230 DATA 4,9,14,7,8 

1240 DATA 6,14,13,11,12,6,7 
1250 DATA 4,12,17,5,6 

1260 DATA 4,1,2,19,10 

1270 DATA 6,13,19,2,3,15,11 
1280 DATA 4,3,4,18,15 

1290 DATA 3,5,16,4 

1300 DATA 3,17,16,5 

1310 DATA 3,18,16,17 

1320 DATA 3,4,16,18 

1330 DATA 5,10,19,13,14,9 


1340 DATA 5,15,18,17512,11 


2000 DEF PROCinitviewtransform(rho, theta, phi) 
2010 LOCAL sintheta,costheta,sinphi,cosphi 


2020 =sintheta = SINCRAD(theta)): costheta = COS(RAD(theta)) 
2030 ~=—s sinphi = SINCRAD(phi)) =: cosphi = COSCRAD(phi)) 
2040 va = ~sintheta : vb = costheta 

2050 ~=ve = -costheta*cosphi : vf = -sintheta*cosphi 

2060 vg = sinphi 

2070 =vi = -costheta*sinphi : vj = -sintheta*sinphi 

2080 vk = -cosphi : vl = rho 


2090 ‘ENDPROC 


2100 DEF PROCviewtransform(x, y, z) 
2110 xe = va*x + vb*y 

2120 ye = verx + vfxy + vg*z 

2130) ze = viex + vjxy + vkez + vb 
2140 ENDPROC 


2150 DEF PROCperspecttransform(xe, ye, ze, d) 
2160 xs = d*xe/ze 

2170 =ys = dxye/ze 

2180 ENDPROC 
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Figure 7.8 

Pseudo three-dimensional 
techniques: spheres from 
ellipses 


10 MODE 0 
20 side = 50 


The kernel of the program is PROCDrawabar which draws a bar 
made up of three surfaces. This has parameters ‘ht’ and ‘p’ and 
draws in two dimensions a box of a given height. This procedure is 
written in relative coordinates and before the procedure is entered 
the graphics cursor is correctly positioned to draw the next bar. The 
procedure is called twice for each bar, the first time using the 
parameter ‘p’ set to 81. This paints the surfaces currently being 
plotted using triangular fill. The next call with ‘p’ set to 1 draws the 
box outline. Now the structure of the program is such that the bars 
are drawn in the order shown in Figure 7.9. This means that if a 
surface in bar n obscures parts of edges in bar n-1, these are 


30 dx = side*COSC(RAD(35)):dy = side*SINCRAD(35)) 


40 PROCdrawaxes 
50 FOR x=1 TO 10 
60 MOVE 0,0 


70 = startx=-x*side*COS (RAD(35)) 
80 = starty=-x*side*SINCRAD(35)) 
90 PLOT O,startx,starty 


100 FOR y=1 TO 10 


110 ht=RND(200):PLOT 0,dx,-dy 


120 GCOL 0,3 


130 PROCdrawbar (ht ,81) 
140 GCOL 0,0 

150 PROCdrawbar (ht,1) 
160 NEXT y 

170 NEXT x 

180 END 


Program 7.4 A pseudo three-dimensional bar-chart (black and white). 
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Figure 7.9 
Plotting order in three- 
dimensional bar chart 


automatically removed by painting the surfaces of bar n (Figure 
7.10). Again it is important to bear in mind that this simple method 
of hidden line removal is only possible because we have set up a 
fixed viewpoint. The output from the program is shown in Figure 
7.11. 

General hidden surface removal is one of the most difficult and 
costly operations in computer graphics. Some hidden surface 
algorithms, as we shall see later, use a painting technique as one of 
the methods in the algorithm. Program 7.5 is a three colour version 


200 DEF PROCdrawaxes 

210 VDU 29,640;640; 

220 MOVE 0,0:DRAW 0,400:MOVE 0,0 

230 =PLOT 1,600*COSCRAD(35)) ,-600*SINCRAD(35)): MOVE 0,0 
240 PLOT 1,-600*COSCRAD(35)) ,-600*SINCRAD(35)): MOVE 0,0 
250 ENDPROC 


300 DEF PROCdrawbar Cht,p) 

310 PLOT 1,dx,dy 

320 PLOT p,0,ht:PLOT p,-dx,-dy 

330 PLOT p,0,-ht 

340 PLOT 1,-dx,dy 

350 PLOT p,0,ht: PLOT p,dx,-dy: PLOT p,0,-ht 
360 PLOT 0,0,ht 

370 =0PLOT 0,-dx,dy: PLOT p,dx,dy 

380 PLOT p,dx,-dy: PLOT p,-dx,-dy: PLOT 0,0,-ht 
390 ENDPROC 
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Figure 7.10 
Painting method of hidden 
surface removal 


Figure 7.11 

Pseudo three-dimensional 
techniques: the three- 
dimensional bar chart 


‘Painting’ these surfaces 
obscures hidden edges 
in bar n—1 


of Program 7.4 and uses exactly the same painting technique. 
Because we are now using three colours the organization of the 
procedure is slightly different. The output from this program is 
shown in Colour Plate 23. In both programs the height of the bars 
was set using the random number utility. 

Another common pseudo three-dimensional technique involves 
using scaling and diverging lines to represent perspective. Program 
7.6 draws the road scene shown in Figure 7.12. This is made up of 
converging kerbs and road markers and trees that decrease in scale 
as the distance down the road increases. The same procedure is 
used to draw every instance of an object. The object drawing pro- 
cedures are controlled from FOR loops. Each time an object, 
whether it is a tree or a road marker, is drawn it is suitably posi- 
tioned and scaled. Note that the shape of the road marker already 
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Figure 7.12 
Pseudo three-dimensional 
techniques: converging lines 


includes convergence. We could if necessary employ the same 
painting algorithm as we used before if, for example, we wanted to 
draw overlapping trees. This would mean reversing the drawing 
order in Program 7.6 because we should have to draw the smallest 
first and work forwards. 


7.3 INPUT OF THREE-DIMENSIONAL DATA 


Having defined a convenient way of representing three-dimensio- 
nal data in a computer, we now move on to considering how such 
data can be generated or created. We will look at two methods of 
creating three-dimensional solids, firstly the input of three-dimen- 


10 MODE 1 


300 DEF PROCdrawbar(ht,p) 


310 
320 
330 
340 
350 
360 
370 
380 
390 
400 
410 


PLOT 1,dx,dy 

IF p=81 THEN GCOL 0,1 

PLOT p,0,ht: PLOT p,-dx,-dy 

PLOT p,0,-ht 

IF p=81 THEN GCOL 0,2 

PLOT 1,-dx,dy 

PLOT p,0,ht: PLOT p,dx,-dy:PLOT p,0,-ht 
IF p=81 THEN GCOL 0,3 

PLOT 0,0,ht 

PLOT 0,-dx,dy: PLOT p,dx,dy 

PLOT p,dx,-dy: PLOT p,-dx,-dy:PLOT 0,0,-ht 


420 ENDPROC 


Program 7.5 A pseudo three-dimensional bar-chart (colour). 


300 


330 
340 


350 
360 
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sional data and secondly the generation of three-dimensional solids 
with mathematical assistance. 

The creation of three-dimensional data is one of the most diverse 
areas in computer graphics. Certainly the art of creating realistic 


MODE O : VDU 29, 640;512; 

PROCdrawhorizon 

PROCdrawroadside 

MOVE -300, -512 

scale = 2: dist = 300 : theta = 60 

FOR tree=1 TO 10 
PROCdrawatree(scale) 
PLOT 0,dist*COSCRAD(theta)) ,dist*SINCRAD( theta) ) 
scale=scale/2 : dist=dist/2 

NEXT tree 

MOVE 0,-512 

scale=2 : dist=300 

FOR marker=1 TO 10 
PROCdrawmarkers(scale) 
PLOT 0,0,dist*SINCRAD(theta)) 
scale=scale/2 : dist=dist/2 

NEXT marker 

END 


DEF PROCdrawhorizon 
MOVE -640,0 : DRAW 640,0 
ENDPROC 


DEF PROCdrawroadside 
MOVE 0,0 : DRAW -300,-512 
MOVE 0,0 : DRAW 300,-512 
ENDPROC 


DEF PROCdrawatree(scale) 
RESTORE 330 
FOR i=1 TO 7 
READ dx,dy 
dx=dx*scale:dy=dy*scale 
PLOT 1,dx,dy 
NEXT i 
DATA -10,0, 0,30, -20,0, 25,120, 25,-120, -20,0, 0,-30 
ENDPROC 


DEF PROCdrawmarkers(scale) 
RESTORE 420 
FOR i=1 TO 5 
READ dx,dy 
dx=dx*scale:dy=dy*scale 
PLOT 1,dx,dy 
NEXT 7 
DATA -10,0, 4,50, 12,0, 4,-50, -10,0 
ENDPROC 


Program 7.6 A pseudo three-dimensional landscape. 
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images of three-dimensional solids is a Cinderella area of computer 
graphics that has not improved as rapidly as the other major areas. 
The difficulties are obvious. Whereas viewing techniques and sur- 
face shading techniques are more or less universal to all models, the 
most convenient method of input or creation is highly application 
dependent. The most obvious approach of typing three-dimensio- 
nal coordinates from a keyboard is an accurate but hopelessly 
tedious method. Most approaches are interactive and the most 
sophisticated are based on methods that allow the construction of a 
solid from primitive elements such as cylinders, spheres, cubes etc. 
Such methods are found in CAD where a common three-dimensio- 
nal model may be a solid machine part. Such software is sometimes 
referred to as a graphics editor. The analogy is with a text editor 
which may take text from different sources e.g. the keyboard, stored 
fragments etc., and allow the user to put a new piece of text together 
and refine and change it. A graphics editor will allow a user to 
combine stored primitive elements, information from the keyboard, 
graphical information from a digitizer tablet or some other graphics 
input device. He will be able to view the model as it is being built up 
and to make refinements to it. 

Another mainstream graphics input technique is to sculpt free 
form surfaces (surfaces that cannot easily be defined by mathemati- 
cal equations) from a keyboard. The surface is defined by patches 
and as it is displayed the user can pull it this way and that, just as if 
he was modelling with a thin sheet of plasticine. This technique was 
originally developed to assist in the design of car bodies. 

Now these techniques are beyond the scope of this text. Graphics 
editors are very complex and application dependent and interactive 
surface patching requires very advanced mathematics. An easy and 
widely used technique that we shall now look at is referred to as 
‘lofting’. 

Thie means defining, via a digitizer tablet or some other interac- 
tive input device, a set of cross-sections of the object to be modelled. 
The best analogy is with a geographic contour map, where each 
contour traces the edge of a surface for a given height. If, for 
example, the object we wanted to define was a cone then we would 
input a set of concentric circles of decreasing radius. In practice of 
course cones can easily be defined analytically and the method is 
used where mathematical definitions are difficult or impossible. The 
general program structure is: 


FOR contour = 1 TO noofcontours 
PROCinput_contour_at_ht(z) 
z = z + interval 

NEXT contour 


The next program, Program 7.7, is a simple demonstration of this 
technique. As it reads from a file that contains the contours it uses a 
nested repeat-until structure. Figure 7.13 shows the input to and the 
output from the program. 
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Now an obvious disadvantage of this technique as it stands is that 
our three-dimensional model is not in the form of a collection of 
surfaces, but comprises a collection of contours at different heights. 
Although the model is easy to plot in this form it is not suitable for 
processing by a hidden surface algorithm nor can it be applied toa 
shading model, which also requires a set of plane polygons. What 
we now need to do is develop a technique that will define a surface 
over the contours as a series of patches. This is called triangulation 
and standard mathematical techniques exist for finding the optimal 
surface between contours. We will adopt a much more straightfor- 
ward approach to map our contour data into a collection of triangu- 
lar surfaces and not concern ourselves with making sure that we 
achieve the optimal surface. 

Program 7.8 incorporates a simple triangulation algorithm. It uses 
our standard surface-vertex data structure and for simplicity oper- 
ates on two contours that are generated by the program. It is easily 
extended to the general case of many contours. The contours are 
just two semi-circles of different radii. These are generated in 
PROCgeneratecontours. The lower contour is a semicircle of radius 
150 at a height of 0. The upper contour is a semicircle of radius 80 at a 
height of 100. These contours are generated by sweeping a radius 
through 180° in 10° intervals. The radius and the interval are both 
randomly perturbed so that a ‘jagged’ semi-circle is generated. This 
simulates the case of a general contour input from a digitizer. The 
vertices of these contours are loaded into array vertex. In the general 


INPUT "Contour file",files 
rho = 2000 : theta = 0: phi = 60 : d = 1500 
PROCinitviewtransform(rho, theta, phi) 
MODE 0 
VDU 29,640;512; 
z=0 :endofcontour = 9999 
fi Le=OPENIN( fi le$) 
REPEAT 
INPUTE file, x,y : PROCworldtoscreen : MOVE xs,ys 
REPEAT 
INPUT£ file, x, y 
IF x<> endofcontour THEN PROCworldtoscreen : DRAW xs,ys 
UNTIL x = endofcontour OR EOF£ file 
z = z+100 
UNTIL EOFE file 
CLOSE£ file 
END 


DEF PROCworldtoscreen 
PROCviewtransform(x-640,y-512,z) 
PROCperspecttransform(xe, ye, ze, d) 

ENDPROC 


Program 7.7 The creation of a three-dimensional object by ‘lofting’. The screen projection procedures are 
as given in Program 7.2. 
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case, for n contours we would need a pointer to the start of each 
contour. 

The only other procedure that we are interested in at the moment 
is PROCtriangulate. This defines a surface of triangular patches 
between the two contours loading the results into array ‘surface’. 
The output from the program is shown in Figure 7.14. The algorithm 
implemented in this procedure works by continually examining the 
relationship between four points (Figure 7.15). ‘curp’ (i.e. ‘curpx’ 
and ‘curpy’) are the (x,y) coordinates of the current point on the 
lower contour. ‘nextp’ (i.e. ‘nextpx’ and ‘nextpy’) are the (x,y) 
coordinates of the next point on the lower contour. A similar con- 
vention is used for the current points on the upper contour. Given 
that the algorithm has triangulated to the current points it compares 
the distance from ‘curp’ to ‘nextq’ with the distance from ‘curq’ to 
‘nextp’: 


Figure 7.13 

The lofting method of 
inputting three dimensional 
data: (a) the object defined as 
a set of height contours; (b)(c) 
the object as a three 
dimensional solid 


IF FNdistpq <= FNdistaqp THEN PROCfixpqq ELSE PROCfixapp 
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PROCfixpqg loads a surface into the data structure using one vertex 
from the lower (p) contour and two from the higher (q) contour. 
PROCfixqpp loads a surface using one vertex from the higher (q) 
contour and two from the lower (p) contour. The algorithm simply 
selects one from a choice of two distances and uses this criteria to 
select 

A number of commonly used convex bodies can be generated by 
sweeping a line through 360° in intervals of say 10°. The simplest 
figure in this class is a cylinder. Cones and spheres can also be 


DIM vertex(3,40),surface(40,3) 

rho=250: theta=15:phi=28:d=600 

PROCinitviewtransform(rho,theta,phi) 

MODE O:VDU 29,640;512; 

PROCgeneratecontours 

PROCtriangulate 

PRINT'noofsurfaces is",noofsurfaces 

FOR surfaceno=1 TO noofsurfaces 
PROCpLotsurfaces 

NEXT surfaceno 

END 


DEF PROCpLlotsurfaces 
LOCAL vertexno,startx,starty 
PROCscreenvertex(surfaceno,1) 
MOVE xs,ys:startx=xs:starty=ys 
FOR vertexno=2 TO 3 
PROCscreenvertex(surfaceno,vertexno) 
DRAW xs,ys 
NEXT vertexno 
DRAW startx,starty 
ENDPROC 


DEF PROCscreenvertex(s,v) 
PROCviewtransform(vertex(1, surface(s,v)), 
vertex(2, surface(s,v)), 
vertex(3, surface(s,v))) 
PROCperspecttransform(xe,ye,ze,d) 
ENDPROC 


DEF PROCgeneratecontours 

r1=150: i1=0 

FOR theta=-90 TO 90 STEP 9 
i=i+1: r11=r1+RND(16)-6: thetar=theta+RND(3)-1.5 
vertex(1,1)=r11*COSCRAD(thetar)) 
vertex(2,i)=r11*SINCRAD(thetar)) 
vertex(3,1)=0 

NEXT theta 

r2=80 

FOR theta=-90 TO 90 STEP 10 


Program 7.8 Triangulation between two contours. 
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generated in this way although when a function, rather than a 
straight line, is swept we have the problem of triangulation again. 
This method is called rotational sweeping and is illustrated in Figure 
7.16. This shows a cylinder being generated by sweeping a vertical 
line through 360°. The method can be generalized so that the swept 
line follows a profile that is input from a digitizer. This will generate 
bodies with translational symmetry and is appropriate in disciplines 
such as engineering and architecture. 

Program 7.9 implements this idea. The contour shown in Figure 


360 i=it1: r22=r2+RND(12)-6: thetar=thetat+RND(2)-1 
370 vertex (1,1)=r22xCOS(RAD(thetar)) 
380 vertex(2,1)=r22*SINCRAD(thetar)) 


390 vertex(3,i1)=100 
400 NEXT theta 
410 ENDPROC 


420 DEF PROCtriangulate 

430 i=0: p=1: q=22 

440 ~=curpx=vertex(1,p): curpy=vertex(2,p) 

450 curqx=vertex(1,q): curqy=vertex(2,q) 

460 nextpx=vertex(1,p+1): nextpy=vertex(2,pt+1) 
470 ~=nextqx=vertex(1,q+1): nextqy=vertex(2,q+1) 
480 REPEAT 

490 IF FNdistpq<=FNdistqp THEN PROCfixpqq ELSE PROCfixqpp 
500 UNTIL p=20 OR q=39 

510 noofsurfaces=i 

520 ENDPROC 


530 DEF PROCfixpaqq 

540 i=it1 

550 = surface(i,1)=p: surface(i,2)=q: surface(i,3)=q+1 
560 curqx=nextqx: curqy=nextqy: q=qt1 

570 = nextqx=vertex(1,q+1): nextqy=vertex(2,q+1) 

580 ENDPROC 


590 DEF PROCfixqpp 

600 i=i+1 

610 surface(i,1)=q: surface(i,2)=p: surface(i,3)=p+1 
620  curpx=nextpx: curpy=nextpy: p=pt1 

630 = nextpx=vertex(1,p+1): nextpy=vertex(2,pt1) 

640 ENDPROC 


650 DEF FNdistpq 

660 sqrx=(curpx-nextqx) *(curpx-nextqx) 
670 ~=sqry=(curpy-nextay) *(curpy-nextay) 
680 =SQRC(ABS(sqrx+sqry)) 

690 DEF FNdistaqp 

700) = sqrx=(curqx-nextpx)*(curgx-nextpx) 
710 = sqry=(curqy-nextpy) *(curqy-nextpy) 
720 =SQRCABS(sqrxtsqry)) 
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Figure 7.14 

Output from simple 
triangulation algorithm 
operating on two semi- 
circular contours 


Figure 7.15 

Variables and distance 
measures in the simple 
triangulations algorithms 


7.17a is input to the program. It is made up of vertices at the junction 
of two straight lines together with vertices every 10 degrees on the 
curves which are all parts of circumferences of a circle. A three- 
dimensional model is easily constructed by considering a duplicate 
contour at some height above the original. Figure 7.17b and Figure 
7.17c show two views of the object as generated by the program. 


7.4 A CASE STUDY - THE WIREFRAME WINEGLASS 


We will now finish off this chapter with a case study that uses a 
selection of the above techniques. We will demonstrate how to 
generate a particular three-dimensional model - the wireframe 
wineglass. This also illustrates that when generating particular 
three-dimensional models there is usually no best method or no 
single method. Program 7.10 illustrates this point containing as it 
does a variety of mathematical and heuristic techniques that are 
tuned to the three-dimensional particularities of the wineglass. 
The object generated by the program is shown in Figure 7.18. 
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Figure 7.16 
a Generating a cylinder by 
a ‘sweeping’ a line through 360° 


10 CLS 

20 INPUT "Contour file", file$ 

30 rho = 700: theta = 45: phi = 45: d = 1000 
40 PROCinitviewtransform(rho, theta, phi) 

50 MODE 0 

60 VDU 29,640;512; 

70 fi le=OPENINC(file$): 

80 INPUT£ file,oldx,oldy 

90 oldx = oldx-640: oldy = oldy-512 

100 REPEAT 

110 INPUT£ file,x,y: x = x - 640: y = y - 512 
120 PROCpLlotplane 

130 oldx = x: oldy = y 

140 UNTIL EOF£ file 

150 CLOSEf file 

160 END 


170 DEF PROCpLotplane 

180 PROCworldtoscreen(x, y, 0): MOVE xs, ys 

190 PROCworldtoscreen(oldx, oldy, 0): DRAW xs, ys 
200 =PROCworldtoscreen(oldx, oldy, 150): DRAW xs, ys 
210 PROCworldtoscreen(x, y, 150): DRAW xs, ys 

220 PROCworldtoscreen(x, y, 0): DRAW xs, ys 

230 ENDPROC 


240 DEF PROCworldtoscreen(x, y, 2) 

250 PROCviewtransform(x,y,z) 

260 PROCperspecttransform(xe, ye, ze, d) 
270 ENDPROC 


Program 7.9 Sweeping a line between two contours. 
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10 DIM object(3,78), scrx(78), scry(78) 

20 MODE O : PROCinitialise 

30 PROCgenerateandplotsection(225, 125, 800, 370) 
40 PROCgenerateandpLlotsection(25, 25, 370, 20) 

50 PROCgenerateandplotsection(160, 160, 20, 0) 

60 PROCmotif (125,175,240) 

70 END 


80 DEF PROCpLotsection 

90 MOVE serx(1),scry(1) 

100 FOR i = 2 TO 74 

110 IF i = 38 THEN MOVE scrx(i),scry(i) ELSE DRAW scrx(i),scry(i) 
120 NEXT i 

130 ENDPROC 


140 DEF PROCworldtoscreen(noofvertices) 
150 FOR i = 1 TO noofvertices 


160 PROCviewtransform(object(1,i), object(2,i), object(3,i)) 
170 PROCperspecttransform(xe, ye, ze, d) 

180 scrx(i) = xs : sery(i) = ys 

190 NEXT i 


200 ENDPROC 


210 DEF PROCgeneratecircle(r, z) 

220 FOR theta = 0 TO 360 STEP 10 

230 i= i+1 

240 object(1,i1) = rxCOS(RAD(theta)) 
250 object(2,i) = rxSINCRAD(theta)) 
260 object(3,i) = z 

270 + ~=NEXT theta 

280 ENDPROC 


290 DEF PROCinitialise 

300 rho=2300 : theta=0 : phi=60 : d=1800 
310 PROCinitviewtransform(rho, theta, phi) 
320 VDU 29,640; 200; 

330 dx = rhoxCOSCRAD(90-phi)) 

340 slope = 0.2 : rb = 125 

350 ENDPROC 


360 DEF PROCpLlotedges 

370 =MOVE scrx(1),scry(1) =: DRAW scrx(3),scry(3) 
380 MOVE scrx(2),scry(2) : DRAW scrx(4),scry(4) 
390 ENDPROC 


400 DEF PROCfindedges(r,z) 

410 gamma = ACS(r/dx) 

420 i = it! 

430 3=object(1,i1) = COSCgamma)*r 
440 object(2,i) =-SIN(gamma)*r 


Program 7.10 Generating the wireframe wineglass. 
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object(3,1) 
i = i+1 

object(1,i) 
object(2,i) 
object(3,1) 


z 


COS (gamma) *r 
SIN(gamma)*r 
z 


ENDPROC 
DEF PROCgenerateandplotsection(rt, rb, zt, zb) 


i=0 

PROCgeneratecircle(rt, zt) 
PROCgeneratecircle(rb, zb) 
PROCwor Ldtoscreen(74) 
PROCplotsection 

i=0 

PROCfindedges(rt,zt) 
PROCfindedges(rb, zb) 
PROCwor ldtoscreen(4) 
PROCplotedges 


ENDPROC 
DEF PROCmotif (z1,z2,z3) 


ri=rbtslope*z1: r2 = rb+slope*z2: r3 = rb+tslope*z3 : i = 0 
21=21+370 : z2=z2+370 : 23=z3+370 
FOR angle = 0 TO 330 STEP 30 
i = i+7 : cos = COS(RADCangle)): sin = SINCRADCangle)) 
object(1,i) = ri*xcos : object(2,i1) = rixsin : object(3,i) = 21 


object(1,i+12) = r2*COSC(RADCangle-5)) 

object(2,i+12) = r2*SINCRAD(Cangle-5)) 

object(3,i+12) = 22 

object(1,i1+24) = r2*xCOS(RAD(Cangle+5)) 

object(2,i1+24) = r2xSINC(RADCanglet5)) 

object(3,i+24) = z2 

object(1,i1+36) = r3*cos : object(2,1+36) = r3*sin:object(3,i+36) = 23 

NEXT angle 


PROCwor Ldtoscreen(48) 
FOR motif = 1 TO 12 
MOVE scrx(motif),scry(motif) 
DRAW scrx(motif+12),scry(motif+12) 
DRAW scrx(motif+36) ,scry (moti f+36) 
DRAW scrx(motif+24) ,scry(motif+24) 
DRAW scrx(motif),scry(motif) 
MOVE scrx(motif),scry(motif) 
DRAW scrx(motif+36) ,scry (moti f +36) 
MOVE scrx(motif+12),scry(motif+12) 
DRAW scrx(motif+24),scry(motif+24) 
NEXT 


890 ENDPROC 
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Figure 7.17 

Constructing a three 
dimensional solid by 
sweeping a vertical line 
around a contour: (a) input 
aata; (b)(c) the object 
generated by the program 


Because of the nature of the object (it is transparent) there is no need 
to store vertices or surfaces and we can generate points and display 
them as they are generated. This is really going against the philoso- 
phy that we have adopted in earlier sections, but again such 
shortcuts are common in this area of computer graphics. 

The wine glass is generated by three calls to PROCgenera- 
teandplotcyl which constructs and plots the top section, stem and 
base respectively. The first two parameters are the top and bottom 
radii. These are equal for the base and the stem (which are perfect 
cylinders) and different for the top section (which is part of a cone). 
The cylinders are constructed by constructing circles in the (x,y) 
plane. These are then turned into ellipses by the viewpoint transfor- 
mation discussed in the next chapter. PROCfindedges located the 
edges that have to be drawn from the top circle (ellipse) to the 
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bottom circle (ellipse) for each cylinder. Remember that depending 
on the viewing angle, even for a perfect cylinder (equal top and 
bottom radii) the viewpoint transformation will in general turn 
these into unequal ellipses. Finally the motifs are generated on the 
surface of the top section. This means that each motif must be, as it 
were, painted onto the curved surface of the top section. The 
heuristic we have used here is to ignore the circumferential curva- 
ture of the surface (which is part of the surface of a cone) and only 
take into account the ‘slope’ of the surface. This is akin to sticking 
flat rigid motifs on the surface of the glass — only the long vertical 
line down the centre of the motif would stick to the glass. You can 
see, however, from the illustrations that the final effect is quite 
convincing and that the benefit of making the motifs the correct 
(curved) shape is not worth the extra mathematics. 

Finally the particular view in the illustration can be enhanced by 
pseudo hidden surface removal on the top section. The illustration 
shown in Figure 8.6b is the same view with the back rim removed 
and the motifs on the back of the top section removed. The altera- 
tions needed to the program to accomplish this are obvious and 
quite trivial but they have a dramatic effect on the final result. 


Figure 7.18 
Generation short cuts: the 
wireframe wineglass 
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8 The three-dimensional 
world — manipulations 


The previous chapter looked at generation techniques for building 
up three-dimensional models in world coordinate space. In this 
chapter we will look first of all at how such models can be moved 
around in world coordinate space. By ‘moving around’ we mean 
shifting the model, expanding or shrinking it, rotating it about one 
or more axes etc. Technically such movements are known as linear 
transformations and the mathematical techniques are just exten- 
sions of the two-dimensional mathematical techniques used to 
transform the two-dimensional models in two-dimensional space. 
Later on in this chapter we will look at the more difficult area of 
three-dimensional non-linear transformations and some decorative 
applications. 

In the previous chapter we used a viewpoint and perspective 
transformation to enable us to display the three-dimensional 
models. In this chapter we will explain these transformations in 
detail and look more closely at their use. 


8.1 THREE-DIMENSIONAL GRAPHICS — GENERAL 
TRANSFORMATIONS 


In this section we extend the techniques used in the two-dimensio- 
nal transformations for translation, scaling, rotation etc. to deal with 
three-dimensional objects. Bear in mind that we are dealing with 
three-dimensional coordinates (x,y,z) that transform under scaling, 
rotation or whatever to other three-dimensional coordinates 
(xt,yt,zt) and that we are not yet ready to display a two-dimensional 
image of a three-dimensional object on the screen. We will thus 
restrict this section to a short discussion on extending two-dimen- 
sional transformations to three-dimensional transformations and 
ignore the viewpoint transformation for the moment. The three- 
dimensional transformation techniques are required before we can 
deal with the transformation into two dimensions for viewing. 
The three-dimensional transformations using homogeneous 
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coordinates (to enable the calculation of net transformation 
matrices) are all of the form: 


(xt,yt,zt,1) = (x,y,z,1) | a 


Og SH 
mm 
i) 


b 
c 
d 


where the basic transformation matrices are: 


Overall magnification or shrinking is achieved by: 


Magnification|S 0 0 0 
0500 
00s0 
0001 


Rotation is easily arrived at by again extending the two-dimensional 
rotation matrix. To rotate counter-clockwise in two-dimensions 
about the origin, we used: 


cos@ sin@ 0 
-sin®@ cos®@ 0 
0 0 1 


and in the three-dimensional case if we consider the z-axis coming 
out of the paper, we have: 


2. Rotation about} cos@ sin@ 0 0 
the z-axis | -sin®@ cos@ 0 0 

0 0 1 0 

0 0 o1 


which produces rotation counter-clockwise about the z-axis. That 
this is a rotation about the z-axis can be seen, informally, from the 
fact that the matrix multiplication only affects the x and y coordi- 
nates. This observation can then be used to write down the other 
two rotation transformations: 
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3. Rotation about | 1 0 0 0 
the x-axis}0 cos6 sin®@ 0 

0 -sin@ cos@ 0 

0 0 0 1 

4. Rotation about |cos@ 0 -sin®@ 0 
the y-axis} 0 1 0 0 

sin@ 0 cos®@ 0 

0 0 0 1 


5. Translation} 1 0 0 0 
0 1 0 0 

0 0 1 0 

Tx Ty Tz 1 


Now our transformation matrices are all of the form: 


nana 
3 09 SA OD 
~~  n, 
i) 


and the multiplication 


(xt,yt,2zt,1) = (x,y,z,1) | a 


~ 
a) 


e 
b f 
c 8 
dh 
reduces to 


(xt,yt,zt) = (x,y,z,1) | a 
b 
c 


0g “A 
~ 


d 


and this is implemented as PROCtransform in Program 8.1 which is 
the program for general linear transformations in three dimensions. 
Figure 8.1 shows a wire-frame cube subject to a selection of such 
transformations. 

Again we can derive net transformation matrices and, for ex- 
ample, if we wanted to rotate a body abouta line parallel to the z-axis 
which passes through the point (Tx,Ty,0) we would use: 
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T1XRXT2 = 

1 0 00 

0 1 00 

0 0 10 
-Tx -Ty 01 
cos@ sin@ 0 0 

-sin6 cos@ 0 0 
0 0 1 0 
0 0 ol 


Oo 

a 
orose 
re OOO 


cos 0 sin 6 0 0 
-sin 8 cos @ 0 0 
0 0 1 0 
-Tx cos 8 + Tysin® -Txsin@-Tycos@® 0 1 
1 0 00 
0 1 00 
0 0 10 
Tx Ty 0 1 
cos 8 sin 6 0 0 
-sin 0 cos 6 0 0 
0 0 10 
-Txcos8+Tysin@+Tx -Txsin®-Tycos8@+Ty 0 1 


For example for a rotation of 30° about a point 


(50,50,0) we have 
0.866 0.5 0 0 
-0.5 0.866 0 0 
0 0 10 
31.75 -18.25 0 1 
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8.2 WORLD COORDINATES TO SCREEN COORDINATES 


In the previous chapter we introduced the idea of the viewpoint 
transformation and the screen transformation, and we have used 
these transformations liberally in programs to display the results of 
various three-dimensional manipulations on a two-dimensional 


10 DIM sx(8), sy(8) 

20 rho = 5000 : theta = 45 : phi = 40 : screendist = 1000 
30 MODE 0 

40 VDU 29, 640; 512; 

50 PROCinitviewtransform(rho, theta, phi) 

60 FOR fig = 1709 

70 ~=pointer = 1000 + fig : RESTORE pointer 

80 READ a,b,c,d,e,f,9g,h,i,j,k,l 

90 RESTORE 220 

100 FOR vertex = 1 TO 8 


110 READ xw, yW, ZW 

120 PROCtransform(a,b,c,d,e,f,g,h,i,j,k,l) 

130 PROCviewtransform(xt, yt, zt) 

140 PROCperspecttransform(xe, ye, ze, screendist) 
150 sx(vertex) = xs : sy(vertex) = ys 


160 NEXT vertex 

170 CLG : PROCdrawaxes : PROCdrawcube 

180 PRINT TAB(O,0) a,e,i' b,f,j' c,g,k' d,h,l 
190 K=GET 

200 NEXT fig 

210 END 


220 DATA 1000,0,0, 1000,1000,0, 0,1000,0, 0,0,0 
230 DATA 1000,0,1000, 1000,1000,1000, 0,1000,1000, 0,0,1000 


240 DEF PROCdrawaxes 
250 RESTORE 330 
260 ~=FOR axis = 1 TO 3 


270 READ x1,y1,z1 : PROCviewtransform(x1,y¥1,z1) 
280 PROCperspecttransform(xe, ye, ze, screendist) : MOVE xs, ys 
290 READ x2,y2,z2 : PROCviewtransform(x2,y2,z2) 
300 PROCperspecttransform(xe, ye, ze, screendist) : DRAW xs, ys 


310 NEXT axis 
320 ENDPROC 


330 DATA 0,0,0,2000,0,0,0,0,0,0,2000,0,0,0,0,0,0,2000 


340 DEF PROCdrawcube 

350 MOVE sx(1), sy(1) 

360 FOR vertex = 2 TO 4 

370 DRAW sx(vertex), sy(vertex) 
380 NEXT vertex 

390 ~=DRAW sx(1), sy(1) 

400 DRAW sx(5), sy(5) 

410 FOR vertex = 6 TO 8 


Program 8.1 Three-dimensional transformations of a wire-frame cube. 


Three-dimensional manipulations 


screen. In this section we will explain in detail how these transfor- 
mations work. We will introduce the topic by looking at the whole 
process applied to a simple example and we will then examine each 
transformation in turn. As we described briefly in the previous 
chapter, going from the three-dimensional world coordinate space 


420 DRAW sx(vertex), sy(vertex) 

430 NEXT vertex 

440 DRAW sx(5), sy(5) 

450 FOR vertex = 2 T0 4 

460 MOVE sx(vertex+4), sy(vertext4) 
470 DRAW sx(vertex), sy(vertex) 

480 NEXT vertex 

490 ENDPROC 


500 DEF PROCtransform(a,b,c,d,e,f,g,h,i,j,k,l) 
510 xt = akxw + b*yw + cezw + d 


520) yt = exxw + fxyw + g*zw + h 

530 zt = ixxw + j*yw + k*zw + L 

540 ENDPROC 

1001 DATA 1,0,0,0,0,1,0,0,0,0,1,0 

1002 DATA 1.5,0,0,0,0,1.5,0,0,0,0,1.5,0 

1003 DATA 0.866,-0.5,0,0,0.5,0.866,0,0,0,0,1,0 
1004 DATA 1,0,0,0,0,0.866,-0.5,0,0,0.5,0.866,0 
1005 DATA 0.866,0,0.5,0,0,1,0,0,-0.5,0,0.866,0 
1006 DATA 1,0,0,0,0,1,1,0,0,0,1,0 

1007 DATA 2,0,0,0,0,1,0,0,0,0,1,0 


1008 DATA 1,0,0,500,0,1,0,500,0,0,1,0 
1009 DATA .866,-.5,0,430.7,.5,.866,0,60.3,0,0,1,0 


2000 DEF PROCinitviewtransform(rho, theta, phi) 
2010 LOCAL sintheta,costheta,sinphi ,cosphi 


2020 =sintheta = SINCRAD(theta)): costheta = COS(RAD(theta)) 
2030 ~=—s sinphi = SINCRAD(phi)) : cosphi = COSC(RAD(phi)) 
2040 va = -sintheta : vb = costheta 

2050 +~ve = -costheta*cosphi : vf = -sintheta*cosphi 

2060 vg = sinphi 

2070 ~=vi = -costheta*sinphi : vj = -sintheta*sinphi 


2080 vk = -cosphi : vl = rho 
2090 ENDPROC 


2100 DEF PROCviewtransform(x, y, 2) 


2110 xe = va*x + vb*y 
2120 ye = verx + vfxy + vg*z 
2130 «ze = viex + vixy + vkez + vib 


2140 ENDPROC 


2150 DEF PROCperspecttransform(xe, ye, ze, d) 
2160 xs = d*xe/ze 

2170 =ys = d*ye/ze 

2180 ENDPROC 
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(a) identity | 1 


or 0 © 


0 
0 1 
0 0 
0 0 


(b) uniform|1.5 0 0 
scaling} 0 1.5 0 

0 oO 15 

0 oO 0 


(c) rotation | 0.866 0.5 0 
(z axis) | -0.5 0.866 0 

0 0 1 

0 0 0 


Figure 8.1 
Using a general 
transformation procedure c 
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(da) rotation | 1 0 0 
(x axis)}0 0.866 0.5 

0 -0.5 0.866 
0 0 0 


(e) rotation | 0.866 0 -0.5 
(yaxis)| O 1 0 
0.5 0 0.866 
0 0 0 
e 
(f}yshear [; 9g 
010 
0. 7. 4 
00 0 
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(g) x scaling | 2 


or Oo Oo 


0 
0 1 
0 0 
0 0 


(h) translation} 1 0 0 
0 1 0 

0 0 1 

500 500 0 


(i) translation | 0.866 0.5 

and rotation | -0.5 0.866 
0 0 

430.7 60.3 


Three-dimensional manipulations 321 


World coordinate 
system 


Xw Vw 
to two-dimensional screen coordinates takes us through two 
transformations. The process is illustrated in Figure 8.2 to Figure 
8.4. Let us start with the cube and pyramid model shown in Figure 
8.2. This has a list of world coordinates, showing that one edge of 
the cube is coincident with the z-axis. Now when we map this into 
screen coordinates we look at the model from a particular view. This 
means that we pretend that our eye is in a certain position in three- 
dimensional space. We then change our system so that the origin is 
centred at the viewpoint and the z-axis points towards the previous 
origin (the point (0,0,0) in the world coordinate system). This is 
shown in Figure 8.3. The ze coordinates are large because the 
viewpoint is a long way from the object. The list of coordinates are 
the three-dimensional eye coordinates for the object. These are the 
world coordinates after the origin is changed to the viewpoint 
(together with the other aforementioned transformations). Some of 


World 
coordinate 
origin 


Viewpoint 
origin 


World coordinates 


OONOQ AWN — 


Figure 8.2 
World coordinate system 


Figure 8.3 

Eye coordinate system: the 
position of the eye is at the 
viewpoint origin 


Eye coordinates 


vertex 


OOANODOAARWND — 
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Screen coordinates 


vertex 


COONAN AWN— 


Figure 8.4 
Screen coordinate system 


the xe and ye coordinates are now negative because the ye and xe 
axes are no longer aligned with the xw and yw axes (the precise 
reasons for this are explained later). The next transformation 
transforms the list of eye coordinates into a list of screen coordi- 
nates. Examination of Figure 8.4 will show that the screen coordi- 
nate list is related to the eye coordinate list. This relationship is 
specified by the perspective transformation described in the next 
section. Now that we have a list of two-dimensional screen coordi- 
nates these can be plotted on the screen using MOVE and DRAW. 

It is important to bear in mind that both the viewpoint transforma- 
tion and the perspective transformation are particular transforma- 
tions, arbitrarily chosen for this example. There is an infinity of 
viewpoint transformations because there is an infinity of view- 
points. There is a large set of perspective transformations depend- 
ing on the particular criteria that we wish to adopt to transform or 
map a three-dimensional point into a two-dimensional point. 


8.3 THE VIEWING TRANSFORMATION 


In this section we will deal with the first of the two transformations 
that take us from world to screen coordinates. This is called the 
viewpoint transformation. The mathematics of this transformation, 
although not particularly demanding, requires a firm appreciation 
of movements (rotations etc.) in three-dimensional space and for 
this reason this has been isolated on Appendix 5. You can simply 
accept the result at this stage or work through Appendix 5. The 
derivation of the transformation is not important, but the interpreta- 
tion of the parameters in the transformation is and this section will 
concentrate on that aspect. 
The required operation is: 


(xe,ye,ze,1) = (xw,yw,zw,1) V 
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where 
V=|-sin@ -cosOcosd -cos@6singd 0 
cos@ -sin@cosg -sin@singd 0 
0 sin > —cos > 0 
0 0 p 1 


(xw,yw,zw) is the coordinate of a point in the world coordinate 
system, V is the viewpoint transformation and (xe,ye,ze) is the 
transformed coordinate. p (rho), 8 (theta) and > (phi) specify the 
position of the viewpoint in world coordinate space. Now the view- 
point is just a single point in three-dimensional world coordinate 
space and the viewpoint transformation converts the coordinates of 
the object in world coordinate space to coordinates in a system 
where the origin is moved to the viewpoint. This system is called the 
eye coordinate system. For mathematical convenience the view- 
point is specified in spherical coordinates (Figure 8.5). This means 
that we specify a point in three-dimensional space using two angles 
and a distance (instead of three distances). As well as simplifying 
the transformation mathematics, it is much easier and more natural 
to specify a particular viewpoint using two angles and a single 
distance. Figure 8.5 can be interpreted as follows. If we draw a line 
from the world coordinate origin to the viewpoint; p is the distance 
along this line, @ is the angle that the plane containing the line 
makes with the z-axis and 9 is the angle that the line makes with the 
z-axis. 

The BASIC implementation of the transformation is given as 
Program 8.2. Note that two procedures are used in the implementa- 
tion. PROCinitviewtransform would be called once for a given 
viewpoint and PROCviewtransform would then be called once for 
each vertex in the object being viewed. The trigonometric calcula- 
tions do not vary amongst vertices and it is important, for reasons of 
efficiency, that these are only carried out once. 

As already mentioned the mathematics of the transformation is 


Spherical 
coordinates 


P (p,8,¢) 


Figure 8.5 
Spherical coordinate system 
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Figure 8.6 

Wireframe wineglass 

(a) illustrating the effect of 
the viewing angle 9; 

(b) confusion at same 
viewing angles can be 
reviewed by adopting 
simple (and partial) 
hidden line removal 


Slice of zy plane 
showing the viewing 
angle 


Slice of zy plane 
showing the viewing 
angle 


not important and we will now look at the effect of varying each 
parameter in turn while keeping the other two fixed. First of all let us 
consider the parameter 9, the inclination of the line from the origin 
to the viewpoint. Figure 8.6a shows two views of the wireframe 
wineglass. In the first view ¢ is set to 10°. This is a very steep 
viewing angle and gives the illusion that we are looking down into 
the top section of the glass. The top rim is almost circular and 
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Slice of zy plane 
showing the viewing 
angle 


Difficulties arise in the 
example above. Here we are 
looking down on the base 
and up towards the rim. 


Ambiguity removed by 
removing both rim and motif. 


contains the other three circles in the model. In the next view 9 is set 
to 40° and you can see the effect that this has on the displayed object. 
Figure 8.6b shows a view that is difficult to interpret because of the 
confusion from lines from the far side of the glass. The second 
illustration shows how, in this particular case, the application of 
simple alterations in the drawing procedure can produce effective 
hidden line removal. 
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2000 DEF PROCinitviewtransform(rho, theta, phi) 
2010 LOCAL sintheta,costheta,sinphi,cosphi 


2020 =sintheta = SINCRAD(theta)): costheta = COS(RAD(theta)) 
2030 = sinphi = SINCRAD(phi)) =: cosphi = COSCRAD(phi)) 
2040 va = -sintheta : vb = costheta 

2050 ve = -costheta*cosphi : vf = -sintheta*cosphi 

2060  ~=vg = sinphi 

2070 ~=vi = -costheta*sinphi : vj = ~sintheta*sinphi 

2080 =vk = -cosphi : vl = rho 


2090 ENDPROC 


2100 DEF PROCviewtransform(x, y, z) 
2110 xe = vakx + vb*y 

2120) ye = verx + vfxy + vg*z 

2130 ze = vikx + vjxy + vk*z + vb 
2140 ENDPROC 


Program 8.2 The viewpoint transformation procedures. 


xy plane showing <q 
viewing angle 


y 
150 
xy plane showing 


viewing angle [> 
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The next parameter to consider is 8, the rotation of the projection 
of the line in the (x,y) plane. Varying this parameter and keeping the 
others fixed will cause the viewer to ‘fly around the object’ as it 
were, at constant elevation. Thus the parameter ¢ fixes the height of 
the viewpoint with respect to the object and the parameter 8 allows 
the viewpoint to be moved around the object in a horizontal plane. 
Now there is no point in moving around the the wireframe wine 
glass because of its rotational symmetry and Figure 8.7 shows views 
of the ‘church with steeple’ for different values of theta. Program 8.3 
was used to generate these illustrations from the data for the 
church. The inclination angle is fixed at 80° and the views are for 0 
set to 30°, 150°, -30° and 210° respectively. A hidden surface 
algorithm has been applied and this is explained in the next chapter. 
Note that the algorithm works on complete surfaces, and that parts 
of surfaces that are obscured from a certain viewpoint are not 
removed. Another way of putting it is to say that this algorithm only 
works for a convex polyhedron. The ‘church with steeple’ is not a 


—30° 


x 


x 


xy plane showing 
viewing angle c 


Figure 8.7 

Changing theta to ‘fly 

around’ an object 

(a) theta = 30 (350,30,80,600) 

(b) theta = 150 
(180,150,80,600) 

(c) theta = -30 (350, 
-30,80,600) 

(d) theta = 210 
(180,210,80,600) 


y 
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10 DIM vertex(3,19), su 
15 DIM vector1(3), vect 
20 INPUT "rho",rho, "th 

"phi" phi, "Sc 
30 PROCinitviewtransfor 
40 MODE 0 : VDU 29, 640 
50 PROCinitialise 


convex polyhedron. Now as we have already mentioned this 
transformation will give us a list of three-dimensional coordinates in 
the eye coordinate system. What we now need is a perspective 
transformation that will produce screen coordinates. This is con- 
siderably easier to derive than the viewing transformation. 


Perspective transformation 

The perspective transformation from the eye coordinate system to 
the screen coordinate system is illustrated in Figure 8.8. Point p is a 
point in the eye system, p’ is its mapping into the screen coordinate 
system and d is the distance of the eye from a screen. If we look at 
the illustration normal to the ye,ze plane we have Figure 8.9. It is 
easily seen thai: 


ys = dxyelze 
Similarly 


xs = dxXxe/ze 


rface(14,9), noofvertices(14) 
or2(3), visible (14) 
eta",theta, 

reen dist",screendist 
m(rho,theta,phi) 

7150; 


55 PROChidden_face_remove 


60 FOR surfaceno = 1 TO 
70 IF visibleCsurface 


surfs 
no) THEN 


PROCtransformand plot (surfaceno) 


80 NEXT surfaceno 
90 k=GET : MODE 7 : END 


3000 DEF PROChidden-face_remove 


3010 sintheta = SINCRAD(theta)): costheta = COS(RAD(theta)) 
3020 = sinphi = SINCRAD(phi)) =: cosphi = COSC(RAD(phi)) 
3030 xview = rhoxsinphixcostheta 

3040 yview = rhoxsinphixsintheta 

3050 zview = rho*cosphi 

3060 FOR surfaceno = 1 TO surfs 

3070 PROCcalc_surface_vectors(surfaceno) 

3080 PROCcalc_normal_vector 

3090 PROCcalc_line_of_sight_vector(surfaceno) 

3100 PROCvisibility_test (surfaceno) 


3110 NEXT surfaceno 


Program 8.3 Generating different views of the church with steeple (Program 7.2). Hidden face removal is 


explained in Chapter 9. 
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Figure 8.8 
Perspective transformation 
details 


3120 ENDPROC 


3130 DEF PROCcalc_surface_vectors(surfaceno) 

3140 FOR i = 1 TO 3 

3150 vector1(i) = vertex(i, surface(surfaceno,2)) - 
vertex(i,surface(surfaceno,1)) 

3160 vector2(i) = vertex(i, surface(surfaceno,3)) - 
vertex(i,surface(surfaceno, 1)) 

3170 =NEXT i 

3180 ENDPROC 


3190 DEF PROCcalc_normal_vector 

3200 = normalx = vector1(2)*vector2(3) - vector2(2)*vector1(3) 
3210 normaly = vector1(3)*vector2(1) - vector2(3)*vector1(1) 
3220 ~=normalz vector1(1)*vector2(2) - vector2(1)*vector1(2) 
3230 ENDPROC 


3240 DEF PROCcalc_line_of_sight vector (surfaceno) 

3250 ~=lineofsightx = xview - vertex(1,surface(surfaceno,1)) 
3260 lineofsighty = yview - vertex(2,surface(surfaceno,1)) 
3270 ~=lineofsightz = zview - vertex(3,surface(surfaceno,1)) 
3280 ENDPROC 


3290 DEF PROCvisibility_test(surfaceno) 
3300 visible(surfaceno) = normalx*lineofsightx 

+ normaly*Lineofsighty 

+ normalz*lineofsightz > 0 
3310 ENDPROC 
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Figure 8.9 
The Y, Z, plane of Fig. 8.8 


Ye 


We can imagine the process as follows. The screen is a plane parallel 
to the (xe,ye) plane. For every vertex in the object, a collection of 
points in the eye coordinate system, we can use a line to join the 
vertex to the origin (the eye). Where each line intersects the screen 
plane gives us the mapping from the vertex into the screen plane. 

There is a family of perspective transformations available but this 
particular one is the easiest to compute and use, so we will restrict 
ourselves to it. It is categorised by having a single vanishing point 
and the xs and ys axes are parallel to the xe and ye axes. 

The perspective transformation is implemented by: 


2150 DEF PROCperspecttransform(xe, ye, ze, d) 
2160 xs = d*xe/ze 

2170 ys = dxye/ze 

2180 ENDPROC 


and this is the transformation that we have used to generate the 
previous illustrations. 


Building up multi-object scenes 

In previous chapters we have made extensive use of two-dimensio- 
nal linear transformations to build up two-dimensional composites 
that contain many instances of the same or different motifs. Starting 
with a set of standard two-dimensional motifs we can operate on 
these using translation, scaling and rotation etc. We can perform the 
analogous operations in three dimensions. Figure 8.10 shows a set 
of three primitive objects. These objects can be moved around in 
three-dimensional space and used to build up multi-object scenes 
by using three-dimensional transformation matrices. This is 
analogous to the way two-dimensional designs were built up by 
moving motifs around in two-dimensional space. 

Figure 8.11 shows views of two scenes generated in this way. The 
program that generated Figure 8.11 is Program 8.4. Both the 
transform matrix parameters and the object vertices are given as 
data sets. 


8.4 DECORATIVE TECHNIQUES IN THREE DIMENSIONS 


A fascinating application of three-dimensional transformation 
techniques is the decoration of the surfaces of three-dimensional 


objects with the digitized motifs that we have used in earlier chap- 
ters. A two-dimensional motif or decoration is defined in the x,y 
plane. The operation of decorating a three-dimensional object with 
a two-dimensional motif is exactly equivalent to taking a piece of 
paper on which the motif is drawn and glueing it onto the surface of 
the object. If the surface onto which we are glueing the motif is flat 
then the required transformation is linear. If the surface is curved 
the required transformation is non-linear. The programming techni- 
ques for both the linear and non-linear processes are identical and 
quite easy. The mathematics of the non-linear transformation is a 
little more difficult. However, as always this can be ignored and the 
final results applied as a recipe. 


Linear decorative techniques in three dimensions 
In this section we shall look at the simple problem of decorating a 
cube. We shall consider the cube to be made up of just three planes, 
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Figure 8.10 

Primitive objects used in 
building up the scenes in 
Fig. 8.11 
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cube |1.7 0 0O 
0 25 0 
0 0 1 
0 oO 0 


prism | 0.5 0 0 


0 05 O 
0 0 0.5 
200 200 400 


hexasolid | 0.5 0 0 


0 05 0 
0 OO 2 
200 600 400 
0 0 -1 
0 1 0 
1 0 0 
400 -1000 0 
Figure 8.11 
A multi-object scene 
generated by applying 


transformations to the cube, 
prism and hexasolid 


planel, plane2 and plane3. Note that this constrains the viewpoint 
to a certain region. As far as the model is concerned only three 
surfaces exist. If we attempt to view the object from a position that 
tries to ‘see’ the non-existent surfaces the results will be confusing. 
The plane scheme is shown in Figure 8.12. Program 8.5 produced 
the illustration Figure 8.13a which is the three planes of the cube 
decorated by a familiar mathematical motif. Figure 8.13b and c were 
produced using exactly the same technique but decorating with a 
motif rather than a mathematical pattern. The main program cons- 
ists of a call to PROCdrawcube that draws the three surfaces and 
then a FOR statement that decorates each surface by calling PROCs- 
quiral three times. PROCsquiral generates a motif as a function of x 
and y. PROCworldtoscreen is then called with x,y values for each 
point on the motif together with a plane number. Three IF state- 
ments in this procedure ‘glue’ the motif to each of the three planes 
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cube} 1 0 0 


0 1 0 
0 0 1 
200 200 400 


prism | 0.5 0 0 


0 O05 O 
0 0 1 
300 300 800 
hexasolid|]2 0 0 
0 2 0 
00 1 
000 
0 0 -1 
0 1 0 
1 0 0 
400 -1000 0 
fw 
Xw Vw 
Figure 8.12 
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3 plane cube to be decorated 
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10 DIM vertex(3,19), surface(14,9), noofvertices(14) 
20 DIM vector1(3), vector2(3), visible(14) 

30 rho = 3500:theta = 45:phi = 45: screendist = 1500 
40 PROCinitviewtransform(rho,theta,phi) 

50 MODE 4: VDU 29, 6407512; 

60 FOR object = 1 TO 4 

70 IF object = 4 THEN RESTORE 1210 

80 = PROCinitialise 

90 =PROCtransformverts 
100 PROChidden_face_remove 
110 FOR surfaceno = 1 TO surfs 
120 IF visible(surfaceno) THEN 

PROCtransform_and plot (surfaceno) 

130 NEXT surfaceno 
140 NEXT object 
150 k=GET : MODE 7 : END 


160 DEF PROCtransformverts 

170 LOCAL x,y,z 

180 IF object=4 THEN RESTORE 1290 
190 READ a,b,c,d,e,f,g,h,i,j,k,l 
200 FOR ii = 1 TO verts 


210 x = vertex(1,ii) 

220 y = vertex(2,11) 

230 = vertex(3,ii) 

240 pROCtransforet.y72) 

250 vertex(1,ii1)=xt: vertex(2,ii)=yt: vertex(3,iid=zt 
260 NEXT ii 


270 ENDPROC 
280 DEF PROCtransform(x,y,z) 


Program 8.4 Generating multi-object scenes. 


10 MODE 4: VDU29,640;512; 

20 ox=640: oy = 512 

30 PROCinitviewtransform(1100,45,55) 
40 screendist = 900 

50 PROCdrawcube 

60 FOR plane = 1 TO 3 

70 =PROCsquiral 

80 NEXT plane 

90 END 


100 DEF PROCdrawcube 

110 RESTORE 200 

120 FOR plane = 1 TO 3 

130 FOR vertex = 1 T0 5 

140 READ x, y, z: PROCviewtransform(x, y, z) 


Program 8.5 Placing a motif on the faces of a cube. 
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290 xt = a®x + bey + cxz + d 

300 yt = exx + fy + gez th 

310) zt = i*x + jxy + k*¥z + L 

320 ENDPROC 

1140 DATA 8, 400,0,400, 400,0,0, 400,400,0, 400,400,400 
1150 DATA 0,400,0, 0,400,400, 0,0,400, 0,0,0 

1160 DATA 6, 4,1,2,3,4, 4,3,5,6,4, 4,5,8,7,6, 4,8,2,1,7, 4,4,6,7,1, 4,3,2,8,5 
1170 DATA 1.7,0,0,0, 0,2.5,0,0, 0,0,1,0 

1180 DATA lg 400,0,0, 400,400,0, 0,400,0, 0,0,0, 200,200,400 
1190 DATA 5 °3,1,2,5, 3,2,3,9, 3,3,4,5, 3,4,1,5, 4,1,4,3,2 
1200 DATA 0-5 5,0,0,200, 0,0.5,0,200, 0,0,0.5,400 

1210 DATA 16, 117,0,0, 282,0,0, 400,117,0, 400,282,0 

1220 DATA 282, 400,0, 117,400,0, 0,282,0, 0,117,0 

1230 DATA 117,0,400, 282,0,400, 400,117,400, 400,282,400 
1240 DATA 282,400,400, 117,400,400, 0,282,400, 0,117,400 
1250 DATA 10, 8,8,7,6,5,4,3,2,1, 8,9,10,11,12,13,14,15,16 
1260 DATA 4,1,2,10,9, 4,2,3,11,10, 4,3,4,12,11, 4,4,5,13,12 
1270 DATA 4,5,6,14,13, 4,6,7,15,14, 4,7,8,16,15, 4,8,1,9,16 
1280 DATA 0.5,0,0,200, 0,0.5,0,600, 0,0,2,400 

1290 DATA 0,0,1,400, 0,1,0,-1000, -1,0,0,0 

150 PROCperspecttransform(xe, ye, ze, screendist) 

160 IF vertex = 1 THEN PLOT 4, xs,ys ELSE PLOT 5, xs,ys 
170 NEXT vertex 

180 NEXT plane 


190 ENDPROC 


200 


DATA 400,0,0,400,400,0,400,400,400,400,0,400,400,0,0 


210 DATA 400,400,400 ,400,400,0,0,400,0,0,400,400,400,400,400 
220 DATA 400,0,400,400,400,400,0,400,400,0,0,400,400,0,400 


230 
240 
250 
260 
270 


DEF PROCsquiral 


theta =O: s = 1 


FOR 


square = 1 TO 10 


RESTORE 380 
a = sxCOSC(RAD(theta)): d = s*SINCRAD(theta)) 


continued 
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280 b=-d: e=a: c=0: f=0 

290 FOR vertex = 1 T0 5 

300 READ x,y 

310 PROCtransform(x,y) 

320 PROCwor Ldtoscreen(xt,yt,plane) 

330 IF vertex = 1 THEN PLOT 4,xs,ys ELSE PLOT 5,xs,ys 
340 NEXT vertex 


350 s = s*0.85: theta = theta + 10 
360 NEXT square 
370 ENDPROC 


380 DATA 200,200,-200,200,-200,-200,200,-200,200,200 


390 DEF PROCtransform(x,y) 
400 xt = a*x + bey +c 
410 yt = d*x + exy + f 
420 ENDPROC 


720 DEF PROCwor Ldtoscreen(x,y,plane) 
730 IF plane = 1 THEN 

z=y: y = x: x = 400: y = y + 200: z = z+200 
740 IF plane = 2 THEN 

z=y: x = x: y =400: z = z + 200: x = x + 200 
750 IF plane = 3 THEN 

x =x: y = y: z = 400: y = y + 200: x = x + 200 
760 =PROCViewtransform(x,y,z) 
770 =PROCperspecttransform(xe,ye,ze,screendist) 
780 ENDPROC 


Program 8.5 continued 


Figure 8.13 
Decorating a cube aiscreen dump to calcomp plotter 
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by performing a linear transformation. The transformation for 
planel for example is: 


z=y 
y=xX 
x = 400 
y = y + 200 
z = z + 200 


Here we have abandoned the more succinct matrix technique in 
favour of clarity. The first two assignments rotate the motif through 


X= 400 
Yw= Yw + 200 
Zw Zw + 200 


Figure 8.14 
Moving the motif plane onto 
plane 1 of the cube 
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90° or make it stand up vertically (Figure 8.14). The next three 
assignments move it to the position of planel and centre it on 
plane1. This two step process is shown in Figure 8.14. Try running 
the program and experimenting with the viewpoint position bear- 
ing in mind the viewpoint restriction already mentioned. 


Non-linear transformations 

In Chapter 3 we dealt with non-linear transformations in two 
dimensions. Here we will extend this idea into three dimensions 
and look at transforming motifs so that they appear to lie on sur- 
faces. This idea is illustrated in Figure 8.15. Here every point in the 
flat shaded region in the xw,yw plane is to be transformed so that it 
lies on the surface of a cylinder. This is like taking a flat piece of 
paper containing the motif and sticking it around the cylindrical 
surface. Note that this is a transformation entirely in world coordi- 
nate space. After the transformation is complete we can view the 
object from any viewpoint as before. The transformation can be 
considered in two stages. First of all we make the motif upright 
again by rotating it through 90° about the x-axis. This is achieved by: 


zw=y 


Consider now Figure 8.16. Here we are looking down ona segment 
of the cylinder. The xw axis contains a single line from the picture or 
motif. The zw axis is out of the paper. A point x in this line is mapped 
onto the circumference (a slice through the cylinder surface) in such 
a way that the distance from the origin to x is the same as the 
distance from (r,0) to the transformed point x’. Given that: 


theta = x/r 


(remember that we are working in radians) the transformed point is 
given by: 


Figure 8.15 

A motif defined in the xw, 
yw plane is wrapped around 
the surface of a cylinder 
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Figure 8.16 
x transforms to x’: note equal 
distances d 


XW r*C0S (theta) 
yw r*xSIN(theta) 


Thus all we need do is to apply this transformation (Program 8.6) 
prior to our normal viewpoint transformation and this gives us a 
motif in the shape of a cylinder. Figure 8.17 shows two views of such 
an object. One object was constructed from the butterfly motif and 
the other from outline characters. Note that it is the points or 
vertices of each figure that are transformed and not the lines con- 
necting them. Although we place the points on the surface of a 
cylinder the lines between the points do not follow this surface and 
the transformation procedure will not ‘work’ for figures with large 
distances between points. 

The next example deals with sticking a motif on a spherical 
surface. This transformation is a little more difficult to understand. 
Basically it is the cylinder transform applied twice over. The first 
transform takes the motif onto the surface of the cylinder containing 
the sphere. The second application of the transform wraps the 
vertical lines that lie along the surface of the cylinder onto the 
surface of the sphere (Figure 8.18). The procedure that implements 
this transform is given as Program 8.7 and this generates the output 
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10 MODE 0 =: VDU29,640;512; 

20 PROCinitviewtransform(2000,0,105) 

30 r=600 : scrdist=1000 : gridsize=600 

40 PROCdrawgrid 

50 FOR y = -gridsize TO gridsize-200 STEP 200 
60 PROCword(-gridsize+150,y) 

70 NEXT y 

80 k=GET:MODE 7:END 


90 DEF PROCdrawgrid 
100 FOR x=-gridsize TO gridsize STEP 100 


110 PROCscreen(x,-gridsize) : MOVE xs,ys 
120 FOR y=-gridsize+100 TO gridsize STEP 100 
130 PROCscreen(x,y) : PLOT 21,xs,ys 


140 NEXT : NEXT 
150 FOR y=-gridsize TO gridsize STEP 100 


160 PROCscreen(-gridsize,y) : MOVE xs,ys 
170 FOR x=-gridsize TO gridsize STEP 100 
180 PROCscreen(x,y) : PLOT 21,xs,ys 


190 NEXT : NEXT 
200 ENDPROC 


210 DEF PROCword(x,y) 

220 RESTORE 

230 ~=READ letters 

240 FOR Llett=1 TO letters 

250 PROCscreen(x,y) : MOVE xs,ys 


260 READ points 
270 FOR p = 1 TO points 
280 READ op,rx,ry 
290 X=xtrx i y=ytry : 
REM coordinates in caption DATA are relative. 
300 PROCscreen(x,y) 
310 PLOT opt4,xs,ys 
320 NEXT p 


330 x = x+200 
340 NEXT lett 
350 ENDPROC 


360 DEF PROCscreen(x,y) 

370 LOCAL xw,yw,zw,xe,ye,ze 

380 = PROCcylinder(x,y,r) 

390 =PROCviewtransform(xw,yw,zw) 

400 PROCperspecttransform(xe,ye,ze,scrdist) 
410 ENDPROC 


420 DEF PROCcyLlinder(x,y,r) 

430 LOCAL theta,phi,projr 

440 = theta=x/r 

450 zw=y 

460 xw=rxCOStheta : yw=r*SINtheta 
470 ENDPROC 


Program 8.6 Wrapping a motif or caption round a cylinder. (Use the caption DATA from Program 3.4.) 
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Figure 8.17 

Mapping onto a cylindrical 
surface: (a) captions (two 
viewpoints); (b) a motif (two 
viewpoints) 


a 


(YLINDER 
(YLINDER 


shown in Figure 8.19. This transformation is in fact the reverse of the 
familiar Mercator projection which is used to transform shapes on 
the surface of a sphere or globe and display them as two-dimensio- 
nal maps. 


8.5 STEREO EFFECTS 


As a final example of the use of three-dimensional transformations, 
we present Program 8.8 which generates a stereo image of a three- 
dimensional object. The image produced on the screen consists of 
two views of the object seen from two slightly different viewpoints. 
One view is displayed in red and the other in blue. The idea is that 
the red image represents what should be seen by the left eye and the 
blue image what should be seen by the right eye. To see the stereo 
effect, the screen must be viewed through a pair of stereo red-blue 
filter glasses. 

To generate the two images, Program 8.8 applies only one view- 
point transformation and then perturbs the x (eye) coordinates 
obtained, first in one direction and then in the other, when applying 
the perspective transformations. Because the two eyes are close 
together, this approximation is adequate to mimic the binocular 
disparity that human beings perceive in a scene. Colour Plate 25 
shows the wireframe wineglass after the stereo transformation has 
been applied. Although the best stereo effect is obtained on the 
screen by using red and blue, for the sake of clarity in the illustration 
red and green have been used. A practical point demonstrated in 
this illustration is that where lines from each stereo image intersect a 
mixture of the two colours must be used. (Magenta for red and blue, 
yellow in the illustration for red and green.) If this is not done then 
intersecting areas are plotted in whatever colour is used second. In 
the fused image this results in blank areas. 
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420 DEF PROCsphere(x,y,r) 

430 LOCAL theta,phi,projr 

440 theta=x/r : phi=y/r 

450 ~=projr=r*COSphi : zw=r*xSINphi 

460 xw=projr*COStheta : yw=projr*SINtheta 
470 ENDPROC 


Program 8.7 The transformation for placing a motif on the surface of a sphere. 
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halfeye = 175 

rho = 5000 : theta 
MODE 1 

VDU 29, 640; 512; 


DIM sx(2,8), sy(8) 


45 : phi = 40 : screendist = 1500 


VDU 19,2,4,0,0,0, 19,3,5,0,0,0 
PROCinitviewtransform(rho, theta, phi) 


FOR fig = 1 T0 9 


PROCperspecttransform(xe, ye, ze, screendist) 


xs1 : sx(2,vertex) = xs2 : sy(vertex) = ys 


CLG : PROCdrawaxes : PROCdrawcube(1) : PROCdrawcube(2) 


pointer = 1000 + fig : RESTORE pointer 
READ a,b,c,d,e,f,9g,h,i,j,k,l 
RESTORE 220 
FOR vertex = 1 TO 8 
READ xw, yw, z2w 
PROCtransform(a,b,c,d,e,f,g,h,i,j,k,l) 
PROCviewtransform(xt, yt, zt) 
sx(1,vertex) = 
NEXT vertex 
PRINT TAB(CO,0) a,e,i' b,f,j' c,g,k' d,h,l 
K=GET 
NEXT fig 
END 
DATA 1000,0,0, 1000,1000,0, 0,1000,0, 0,0,0 


DATA 1000,0,1000, 


DEF PROCdrawaxes 
RESTORE 330 
FOR axis = 1 TO 3 
READ x1,y1,z21 : 


1000,1000,1000, 0,1000,1000, 0,0,1000 


PROCviewtransform(x1,y1,21) 


PROCperspecttransform(xe, ye, ze, screendist) 


Program 8.8 Alterations to Program 8.1 to produce red-blue stereo pairs. 


8.6 THE USE OF COLOUR IN TRANSFORMATIONS 


Colour can be used effectively in any of the two-dimensional or 
three-dimensional transformations described above. Colour Plate 
24 shows a motif that has been manually coloured in its original 
form before the transformation took place. The colouring informa- 
tion is then transformed along with the vertices. This means that a 
motif need be coloured once only irrespective of how many times it 
is transformed or the nature of the transformation. All we have to do 
after a set of vertices has been transformed is to ensure that the 
transformed areas are coloured in the correct colour. We can do this 
by storing the start coordinates given to the colour fill algorithm in 
the original or untransformed version of the motif. These are stored 
as a list of coordinate pairs and associated colour code. When the 
motif is transformed the list of coordinate pairs is subjected to the 
same transformation and the transformed coordinate list, together 
with the colour codes, are used to drive the colour fill procedure. 
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axisxt=xs1 : axisx2=xs2 : axisy=ys 

READ x2,y2,z2 : PROCviewtransform(x2,y2,z2) 

PROCperspecttransform(xe, ye, ze, screendist) 

GCOL 1,1 : MOVE axisx1,axisy : DRAW xs1,ys 

GCOL 1,2 : MOVE axisx2,axisy : DRAW xs2,ys 
NEXT axis 


ENDPROC 
DATA 0,0,0,2000,0,0,0,0,0,0,2000,0,0,0,0,0,0,2000 
DEF PROCdrawcube (eye) 


GCOL 1,eye 
MOVE sx(eye,1), sy(1) 
FOR vertex = 2 TO 4 
DRAW sx(eye,vertex), sy(vertex) 
NEXT vertex 
DRAW sx(eye,1), sy(1) 
DRAW sxCeye,5), sy(5) 
FOR vertex = 6 TO 8 
DRAW sxCeye,vertex), sy(vertex) 
NEXT vertex 
DRAW sx(eye,5), sy(5) 
FOR vertex = 2 TO 4 
MOVE sx(eye,vertext+4), sy(vertex+t4) 
DRAW sx(eye,vertex), sy(vertex) 
NEXT vertex 


ENDPROC 
DEF PROCperspecttransform(xe, ye, ze, d) 


xs1 = d*(xethalfeye)/ze - halfeye 
xs2 = d*(xe-halfeye)/ze + halfeye 
ys = d*ye/ze 


2190 ENDPROC 
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9 Reality in computer 
graphics 


Reality in computer graphics is a goal that is very near to fulfilment. 
The ultimate aim is to present a computer generated image that 
looks so real that a viewer will be unable to tell whether it is a real 
image or a generated image. The two major techniques that con- 
tribute to this goal are the removal of hidden surfaces and the 
shading of visible surfaces. Both techniques are computationally 
expensive. 

Shading means considering every pixel in a two-dimensional 
representation of a surface and allocating a colour and an intensity 
to it according to a number of factors. These factors change over a 
surface as the position of the point that the pixel represents in three- 
dimensions changes. The colour of a pixel representing a point ona 
surface depends both on the nature of the surface and the nature of 
the illumination that is assumed to be falling on it. The illumination 
may consist of diffuse light (uniform in all directions) and point 
source light from one of a number of point sources. Diffuse illumina- 
tion considered on its own is not enough to make a scene realistic. 
Complete diffuse lighting rarely occurs naturally and the shade of a 
point, in diffuse light, does not change when its orientation 
changes. Point source lighting adds more realism giving specular 
reflections or highlights. 

The surface properties that determine how a pixel is coloured are 
reflectance (in effect the colour of the object), transparency (how 
much light is reflected and how much light passes through the 
object) and texture (a perfectly smooth object looks different from a 
coarsely textured object of the same colour). 

Two examples of shapes that have been shaded using a shading 
model based on such factors are shown in Colour Plate 26. Such 
models are generated on high resolution displays with 8 or more bits 
available for each pixel. 

A more recent development that allows transparent and 
semitransparent surfaces to be modelled is ray tracing. This accom- 
modates shadows and the distortion of parts of a scene viewed 


through a transparent object. Currently, this is so computationally 
expensive that it is used only in research. 

Now with a small micro we are limited by practical considerations 
to the wire frame models discussed in previous chapters. In MODE 
0 even although the spatial resolution (640 x 256) is reasonable, each 
pixel at this resolution can only have one of two values (1 or 0) in the 
screen memory. This can only be used to define a surface using lines 
for its boundaries or by filling it in one uniform colour. To do 
realistic surface modelling we would need to have at least 8 bits per 
pixel. In MODE 1 four colours are available and we can mix colours 
using the techniques described in Chapter 2. This, however, as we 
have seen, effectively results in a further decrease in resolution. Its 
real application is ‘decorative’ in micro-computer art rather than 
‘realistic’ in mathematical shading models. So, in this chapter we 
will restrict our discussion to the technique that can be implemented 
- hidden surface removal. 


9.1 HIDDEN SURFACE REMOVAL 


Even although we cannot embark on surface shading we can 
enhance our wire frame models by removing hidden surfaces (or 
hidden edges). We are going some way towards realism by making 
the three-dimensional relationships amongst objects, and the three- 
dimensional relationships amongst surfaces within an object easier 
to interpret. The effect of ambiguities such as the well known 
Necker cube illusion are diminished. There is a large variety of 
hidden line removal algorithms used in different contexts. There is 
no standard approach or algorithm, the algorithm used depends on 
the application. One thing is certain, hidden line removal will add 
an execution time penalty to your program. 

Another problem that needs to be carefully considered is storage 
limitation. Effective hidden surface removal algorithms are large 
programs operating in graphics modes that themselves make large 
memory demands. This means that there is little space left for data 
structures and the remaining graphics programs. Memory space 
management is a separate topic and various techniques can be 
employed. For example, program compression, splitting the pro- 
gram into a ‘common’ segment plus a number of segments that 
chain each other, and using separate programs and disk files are 
three possibilities. 

Before describing hidden surface algorithms we should mention 
one of the important factors that distinguish the algorithms. 
Algorithms can either operate in object space where the calculations 
are carried out in the world coordinate system or in display space 
where the calculations are carried out in the screen coordinate 
system. Hybrid algorithms use information from both the object 
and the image space domain. 

The remainder of this chapter is devoted to the discussion of three 
algorithms. The first cannot be implemented on the BBC Micro, but 
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is very easy to understand. It may eventually be possible to imple- 
ment this algorithm on future generations of micros as their 
memory capacity grows. 

The second and third algorithms are implemented using a simple 
scene as an example. These two algorithms are the most common in 
use and they are easy to understand and implement. Both use direct 
application of geometric principles. 


9.2 DEPTH BUFFER ALGORITHM 


One of the most direct approaches to the problem of hidden surface 
removal is the depth buffer or z—buffer algorithm. In this algorithm 
we keep a record of the intensity of a pixel together with its depth or 
value of its ze coordinate (depth information comes from object 
space and the algorithm, although primarily a display space 
algorithm, needs some information from the object domain). The 
need for a two-dimensional buffer to store the ‘depth’ of each pixel 
gives the algorithm its name and of course is the major disadvantage 
of the technique as it requires considerable extra storage. Each pixel 
now needs memory space , not only for its colour, but for its depth 
in the scene. To store a depth in the range 0-1023 would require 10 
extra bits per pixel. This algorithm trades simplicity and ease of 
implementation against heavy memory requirement. The algorithm 
operates on the polygons that delineate the boundary of a surface 
that has been mapped into the screen coordinate system. It can be 
stated as: 


1. Initially set depth(x,y) to a large value and intensity(x,y) to 
the background. 


2. For every polygon in the scene find all the pixels that lie 
within the polygon 


For each pixel within the polygon: 
a) Calculate its z value 


b) If the z value < depth(x,y) (eye coordinates) then 
depth(x,y) becomes the z value and _ intensity(x,y) 
becomes the intensity of the pixel, otherwise leave 
depth(x,y) and intensity(x,y) unaltered. 


The process is exactly equivalent to searching through all the z 
values that a point (x,y) can have, assuming that a number of 
polygons overlap on (x,y) and assigning to the pixel (x,y) the appro- 
priate value from the polygon that has the smallest z value. 

Now although the above algorithm is easy to understand we 
cannot implement it on the BBC Micro because of memory limita- 
tions. It is worth mentioning that if sufficient memory were avail- 
able, this is an extremely good algorithm. Not only is it easy to 
implement, but, unlike all other hidden surface algorithms, its 
execution time does not increase as a function of the complexity of 
the scene (the number of surfaces it contains). We shall look at 


another algorithm that can be implemented. Before we do this 
however we will look at back surface elimination or ‘culling’. This 
removes those faces of a single object that cannot be seen because 
they face away from the viewpoint. The algorithm will do this for 
each object in the scene. Thus if the scene is a single convex 
polyhedron, that is the hidden surface problem solved. It cannot 
however deal with multi-object scenes where one object may par- 
tially obscure the other, nor with single non-convex objects. How- 
ever removing back faces in every case will cut down on the work to 
be done by the hidden surface algorithm and we will deal with this 
first. Back face removal typically removes half of the polygons in a 
scene. We will develop an algorithm to remove back faces then a 
complete hidden surface algorithm to be applied to the scene after it 
has had its back faces removed. 


9.3 BACK SURFACE ELIMINATION 


Back surface elimination is not really an algorithm but a straightfor- 
ward application of vector mathematics. It can be used as the basis 
of a more general algorithm that will deal with scenes containing 
many convex polyhedral objects. It is an object space procedure and 
although we are removing edges in a wire frame model, paradox- 
ically it is the surfaces defined by the edges that we consider. 

Given a viewpoint we determine whether or not a face is visible 
from that viewpoint. Consider Figure 9.1 showing a cube decom- 
posed into six surfaces. Pointing out of each surface we have a line 
that is normal or perpendicular to the surface. This line or vector 
determines the orientation of the plane. As the orientation of a plane 
changes, so does the orientation of this vector. It is called a surface 
normal vector. From the viewpoint we can construct ‘line of sight’ 
lines or vectors to any point on each surface. If we construct a line of 
sight vector to meet the surface vector, then the angle between these 
two vectors gives us a visibility test. The surface is visible from the 
viewpoint if, and only if, the angle between these two vectors is less 
than 90°. 


Normal vector 


Viewpoint 


Line of sight vectors 


Normal vector 


Visible 
Invisible 


Normal! vector 
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Figure 9.1 

Three surfaces of a cube, 
their normal vectors and line 
of sight vectors 
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In Program 9.1 we have implemented back surface elimination for 
the wire frame cube. PROChidden_face_remove tests each of the six 
surfaces for visibility. If a surface is visible its edges are plotted. We 
have used the hierarchical data structure introduced in Chapter 7 
and PROCinitialise, which sets up a cube in this data structure is 
reproduced for convenience. 

PROChidden_face_remove lists the method broken down into 
further procedure calls. Although it adds nothing to the method it is 
always desirable to break up complex algorithms into as many steps 
as possible. 

The first thing that we do is to calculate the components of a pair 
of vectors lying in the surface. (To do this we need to use some 
vector mathematics. Algebraically this is very simple as can be seen 
from the procedures. It is best simply to accept these. Alternatively 
you can consult a text book: they are very common vector opera- 
tions.) These are two vectors emanating from the first vertex. We do 
this for each surface and calculate the components of vector] and 
vector2, storing them in arrays ‘vector!’ and ‘vector2’. This is shown 
in Figure 9.2 and is done by PROCcalc_surface_vectors. 


10 DIM vertex(3,8), surface(6,4) 

20 DIM vector1(3), vector2(3) 

30 DIM visible(6) 

40 CLS: INPUT ''"Viewing dist, rho",rho, 
"Viewing angles:"'"theta",theta, "phi",phi, 
"screen dist,d",d 

50 costheta=COS(RAD(theta)) : sintheta=SIN(RAD(theta)) 

60 cosphi=COSCRAD(phi)) : sinphi=SINCRAD(phi)) 

70 xview = rhoxsinphixcostheta 

80 yview = rhoxsinphixsintheta 

90 zview = rhoxcosphi 

100 PROCinitviewtransform(rho,theta,phi) 

110 MODE O =: VDU 29, 640; 512; 

120 PROCinitialise 

130 PROChidden_face_remove 

140 FOR surfaceno = 1 TO 6 

150 IF visible(surfaceno) THEN 

PROCtransformand_plot(surfaceno) 
160 NEXT surfaceno 
170 k=GET : MODE 7 : END 


180 DEF PROCinitialise 
190 LOCAL v, vertexno,surfaceno 
200 FOR v = 1 TO 8 


210 READ vertex(1,v), vertex(2,v), vertex (3,v) 
220 NEXT v 

230 FOR surfaceno = 1 TO 6 

240 FOR vertexno = 1 TO 4 

250 READ surface(surfaceno, vertexno) 


Program 9.1 ‘Culling’ or back surface elimination. 
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Figure 9.2 

Two surface vectors 
Vector 1 

calculated from the first 


2 three vertices of a surface 


The ‘cross product’ of vector] and vector2 gives a normal vector or 
a vector perpendicular to the surface and joining the surface at the 
first vertex. Vector multiplication differs from ordinary multiplica- 
tion. The product can be another vector whose orientation depends 
on the type of the multiplication. A cross product gives a vector 


260 NEXT vertexno 
270 ~=NEXT surfaceno 
280 ENDPROC 


290 DATA 100,0,0, 100,100,0, 100,100,100, 100,0,100 
300 DATA 0,0,0, 0,100,0, 0,100,100, 0,0,100 

310 DATA 1,2,3,4, 2,6,7,3, 3,7,8,4 

320 DATA 6,5,8,7, 1,5,6,2, 1,4,8,5 


330 DEF PROChidden_face_remove 
340 FOR surfaceno = 1 TO 6 


350 PROCcalc_surface_vectors(surfaceno) 

360 PROCcalc_normalvector 

370 PROCcalc_line_of_sight vector (surfaceno) 
380 PROCvisibility_test (surfaceno) 


390 NEXT surfaceno 
400 ENDPROC 


410 DEF PROCcalc_surface_vectors(surfaceno) 
420 FOR i = 170 3 


430 vector1(i) = vertex(i, surface(surfaceno,2)) - 
vertex(i, surface(surfaceno,1)) 
440 vector2(i) = vertex(i, surface(surfaceno,3)) - 


vertex(i, surface(surfaceno, 1)) 
450 NEXT i 
460 ENDPROC 


470 DEF PROCcalc_normal_vector 
480 normalx = vector1(2)*vector2(3) - vector2(2)*vector1(3) 
490 normaly = vector1(3)*vector2(1) - vector2(3)*vector1(1) 


continued 
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normalz = vector?(1)*vector2(2) - vector2(1)*vector1(2) 
ENDPROC 


DEF PROCcalc_line_of_sight_vector(surfaceno) 


Lineofsightx = xview - vertex(1,surface(surfaceno,1)) 

Lineofsighty = yview - vertex(2,surface(surfaceno,1)) 

Lineofsightz = zview - vertex(3,surface(surfaceno,1)) 
ENDPROC 


DEF PROCvisibility_test(surfaceno) 
visible(surfaceno) = normalxxlineofsightx + 
normalyxlineofsighty + 
normalz*lineofsightz > 0 
ENDPROC 


DEF PROCtransform_and_plot(surfaceno) 
LOCAL vertexno, startx,starty 
PROCscreenvertex(surfaceno,1) 
MOVE xs,ys : startx=xs : starty=ys 
FOR vertexno = 2 TO 4 
PROCscreenvertex(surfaceno,vertexno) 
DRAW xs,ys 
NEXT vertexno 
DRAW startx,starty 
ENDPROC 


DEF PROCscreenvertex(s,v) 


Program 9.1 continued 


Figure 9.3 


normal to those two vectors that make up the product. This has 
components ‘normalx’, ‘normaly’ and ‘normalz’. This is shown in 
Figure 9.3 and is done by PROCcalc_normal_vector. 

We can then calculate the components of the vector that joins the 
viewpoint to the vertex containing the normal vector and apply the 
visibility test. This vector is called the line of sight vector (Figure 
9.4). The procedure that calculates the vector is PROC- 
calc_line_of_sight_vector. PROCvisibility_test calculates the ‘dot 
product’ of the line of sight and normal vectors. If the magnitude of 
the dot product is less than zero the the angle between the two 
vectors is greater than 90°. 


@) Vector 2 


The normal vector calculated 

from the surface vectors by Normal vector 

cross product multiplication 

of vector 1 and vector 2 Vector 1 
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PROCviewtransform(vertex(1, surface(s,v)), 
vertex(2, surface(s,v)), 
vertex(3, surface(s,v))) 

PROCperspecttransform(xe,ye,ze,d) 

ENDPROC 


DEF PROCinitviewtransform(rho, theta, phi) 
LOCAL sintheta,costheta,sinphi ,cosphi 
sintheta = SINCRAD(theta)): costheta 
sinphi = SINCRAD(phi)) =: cosphi 
-sintheta : vb = costheta 
-costhetaxcosphi : vf = -sintheta*cosphi 
sinphi 
-costhetaxsinphi : vj = -sintheta*sinphi 
-cosphi : vl = rho 


COS(RAD(theta)) 
COS (RAD(phi)) 


< 
Bo} 
Wow dom 


ENDPROC 


DEF PROCViewtransform(x, y, z) 
xe = vakx + vb*y 

vexx + vfxy + vg*z 

ze = vikx + vjxy + vk*z + vib 


< 
oO 
iT 


DEF PROCperspecttransform(xe, ye, ze, d) 
xs = d*xe/ze 
ys = dxye/ze 

ENDPROC 


Finally we need a standard transformation and plotting pro- 
cedure for a surface (PROCtransform_and_plot). 

Figure 9.5 shows views of the cube together with a list of the 
surfaces removed for two different viewpoints. 


9.4 DEPTH SORT ALGORITHM 


This is a hidden surface algorithm that can be applied after back 
surface removal to resolve any remaining problems. It is also known 


Viewpoint 


Line of sight vector 


Figure 9.4 

Comparing the normal 
vector with the line of sight 
vector to determine the 
visibility of a surface 


Normal 
vector 
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Figure 9.5 as the Newell, Newell and Sancha algorithm. It is a good algorithm 

Output from the complete to implement ona micro because it is relatively fast for a low number 

back face elimination of surfaces. It does however demand a fine understanding of three- 

program showing a cube dimensional coordinate geometry and it is the longest program in 

from, differed view piints the book. As always, if you are not happy with the mathematics 
then just use the procedures and get used to what they do. 

Like the depth buffer algorithm this is a priority algorithm. How- 
ever, we now work on the priority of a complete surface rather the 
priority of a single pixel. We store only a priority ordering for the 
surfaces rather than a depth (equivalent to a priority) for each pixel. 
Bear in mind that back surface elimination removes complete sur- 
faces. What we now have to do is to remove parts of surfaces where 
appropriate. In the five polygon scene in Figure 9.6, for example, we 
need to remove the areas of polygon d that are obscured by polygons 
a, band c. To do this we have to compare each polygon with every 
other. This problem, of surfaces nearer the viewpoint overlapping 
other surfaces, occurs, not only with sets of convex polyhedra, but 
also within a single polyhedron that is not convex. For example, in 
the church scene used in Chapter 7 certain viewpoints reveal a 
‘clash’ between surface A and surface B. (Figure 9.7). 

Removing ‘parts of a surface or polygon’ means, in the case of a 


Figure 9.6 

Two convex solids after back 
face elimination — five 
polygon scene 


wire frame model, removing parts of the edge of a polygon, since 
the colour of all the surfaces is the same: the background colour. 
Thus what we are doing in this case is really hidden line removal. 
However, the algorithm will work equally well for shaded or filled 
surfaces. In fact, if we have only two colours available, we can use 
the background colour to eventually fill each polygon. 

The basis of the algorithm is quite simple and we shall discuss the 
principles in outline before looking at how the algorithm is imple- 
mented in detail. There are three major steps in the algorithm and 
the second step resolves into 4 further steps. The major steps are: 


1. Tentatively depth sort all polgons in the scene. 


This means allocating a priority to a polygon according to its 
distance from the viewpoint. Polygons furthest from the 
viewpoint get a lower priority than those near. Initially, this 
is done on the basis of the maximum z (eye) coordinate of 
each polygon. 


2. If the depth extent of polygons overlap then resolve these 
ambiguities. 
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Figure 9.7 

View of the church scene 
that reveals a clash between 
surfaces A and B 
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This means that if the minimum z distance of a (lower 
priority) polygon is less than the maximum 2 distance of a 
(higher priority) polygon then these two polygons must be 
examined in further detail and their priorities swopped if 
necessary. 


3. Colour fill each polygon in the background colour starting 
with the lowest priority polygon and going through the 
others in order of ascending priority. 


Step 3 is easiest to understand and we will explain it first. Say, for 
example, in the five polygon scene, steps 1 and 2 produce the 
priority list e, d, b,c, a. We plot the polygons in that order and colour 
fill each polygon before drawing its outline. The scene is then built 
up on the screen as shown in Figure 9.8. Each time a polygon is 
filled, this erases those lines that are edges of a polygon of lower 
priority. In the case of a wire frame model, this process (filling all of 
the polygon with background colour when most of it is already is 
background colour just to delete part of an edge) may seem rather 
extravagant, but two points need to be made. First of all the depth 
sort algorithm is a hidden surface removal algorithm and will work 
on models where the surfaces are shaded in a complex way. Se- 
condly the depth sort algorithm is the most efficient hidden surface 
algorithm for scenes containing up to many thousands of polygons. 
It is only for scenes more complex than this that other algorithms are 
more efficient. If you doubt this and can come up with a more 
efficient algorithm then you can name it after yourself and a place in 
history is assured! 

To colour fill a convex polygon, or even a simple non-convex 
polygon, we can use a standard sequence of triangle fills. If the 
polygons are more complex, a triangle fill algorithm like that given 
in Chapter 5 can be used. 

The final step is sometimes called the painter algorithm. It is like 
the process of oil painting where a background can be painted in 
first. Figures in the image nearer the foreground can then be painted 
over the background obscuring it. Those figures can themselves be 
painted over and the process is continued until the foreground 
figures are finally painted. 

We will now return to the algorithm and look at steps 1 and 2 in 
more detail. Step 1 is 


1. Depth sort all the polygons in the scene. 


For each polygon in the scene we find its maximum z coordinate. 
The polygons are then sorted initially on this basis. We then ex- 
amine all pairs of polygons looking for a z-extent overlap. For the 
cube-pyramid scene we would perhaps expect an overlap between 
polygons c and d. This is illustrated in Figure 9.9 which shows the 
scene in the x,z plane (eye coordinates). The second part of the 
figure shows how the objects would have to be positioned for there 
to be no z extent overlap. If there is an overlap between two 
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Step 1 plot 

and fill e 

Step 2 plot 

and fill d 

Step 3 plot 

and fill b 4 

Step 4 plot 

and fill c 

Step 5 plot Figure 9.8 

and fill a The five steps in building up 
the five polygon scene 
assuming a priority order 
a,c,b,d,e 


polygons then we cannot say at this stage which polygon obscures 
which and we must enter step 2 to resolve this ambiguity. Step 2 is: 


2. If the z extent of a pair of polygons overlap then resolve this 
ambiguity. 
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Figure 9.9 

Five polygon scene with 
overlap and without overlap 
(The shape of the figures’ 
cross-sections depends on 
the viewpoint) 


Objects repositioned 
No z extent overlap 
between objects 


z extent overlap 
between objects 


—________—_}» x 
——_——_ > x 


This is generally done by entering four subsidiary checks. We call 
the lower priority polygon P and the higher priority polygon Q. 
Whenever a check succeeds we assume the polygons P and Qare in 
the correct priority order and we can proceed to compare polygon P 
against other polygons in the list. If all four checks fail then the last 
two checks are reapplied to see if Q has a lower priority than P. If the 
tests fail again then we have a commonly occurring special case that 
must be dealt with by another procedure. If any test on the 


Test fails 
because minimum 
area rectangles overlap 


Test 


a 
| succeeds 
| 
| 
| 


Figure 9.10 

Minimax test for polygons — 
test for an overlap between 
the x extent and the y extent 
of the minimum area 
rectangles that enclose each 


polygon 


re-application succeeds then we can resolve the ambiguity by swop- 
ping the priorities of P and Q. 
The checks are 


(i) Minimax in x-y (screen coordinates) 


This is illustrated in Figure 9.10. We surround each polygon with its 
minimum area rectangle and check to see if there is any overlap in 
the x-extent or y-extent of the rectangle. The name derives from the 
way in which these distances are checked. For example we would 
check the minimum x coordinate of one polygon against the maxi- 
mum x coordinate of the other. If this test succeeds then the 
polygons do not overlap in x,y in screen coordinates. They therefore 
cannot obscure each other from the viewpoint under consideration. 


The test applied to polygons a and d in the five polygon scene is 
shown in Figure 9.11. 


(ii) Full overlap test in x-y (screen coordinates) 


This test, a more rigorous test than the minimax, is illustrated in 


Figure 9.12. It resolves polygons that do not overlap but fail the 
simple minimax test. 


(iii) P is wholly on that side of the plane of Q which is further from 
the viewpoint. 


This test is illustrated in Figure 9.13. We carry out this test by 
substituting each vertex in P into the equation for the plane of Q. 


y 


i co) 


x 


5 polygon scene — overlap in x and y 
extent — test fails 


e; 
x —>* 
5 polygon scene — objects repositioned 
There is now no x extent overlap and 
test succeeds 
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Figure 9.11 
Minimax overlap — test 
applied to polygons b and d 
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Figure 9.12 
Full overlap test in xy 


Figure 9.13 
Applying test (iii) in the five 
polygon scene 


Minimax xy fails. 
Full overlap test 
in xy succeeds 


Full overlap in xy 
fails 


x x 


Whenever a result of the wrong sign is obtained the test fails. For the 
test to succeed all vertices in P must give a result that has the 
opposite sign to the result obtained if the origin (the viewpoint) is 
substituted in the equation for the plane of Q. The mathematics of 
this is best accepted on a formula basis. Alternatively any book on 
three-dimensional coordinate geometry will contain all the neces- 
sary material. 


(iv) Q is wholly on that side of the plane of P which is nearer the 
viewpoint. 


The reason for having both these tests should become clear if you 
examine some of the examples. If all four tests fail then we re-apply 
the last two tests, this time testing Q against P. If the tests now 
succeed then P and Q must be swopped in the priority list. If they 
fail again we have encountered a commonly occurring looping 
situation. Look at the situation in Figure 9.14. This illustrates the 
case of two rectangular solids (the easiest to consider). Say we are 
comparing surfaces a and b. They will fail tests (iii) and (iv). When 
they are tested the other way round, they will fail again and the 


P is not wholly on that side of 
the plane of Q which is further from 
the viewpoint — test fails 


Q is wholly on that side of 
the plane of P which is 
nearer the viewpoint 


algorithm will loop forever. This is because the plane of a cuts 
polygon b and the plane of b cuts polygon a. So, if tests (iii) and (iv) 
fail again it is because of the mutual plane cutting property of P and 
Q. Clearly the situation depicted in Figure 9.14 is not uncommon 
and we must deal with it. We do this by choosing one of the pair of 
conflicting polygons and splitting this polygon into two. 
Re-application of the algorithm should now succeed. Things are not 
quite as simple as this, however, and further problems can occur. 
These are explained below when the main program structure is 
discussed. In Figure 9.15 surface b has been split by the plane of a 
into two polygons b and c. The algorithm now proceeds and a will 
end up with a priority intermediate between b and c. Note that if the 
solids in Figure 9.14 are well separated, then the situation would be 
resolved by a full x-y overlap test and there would be no need for 
plane splitting. This situation is shown in Figure 9.16. 

Now the cost (in computing time) of applying each of the above 
tests varies tremendously. The cheapest is the x-y minimax test and 


KES 
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Figure 9.14 
The looping situation that 
the algorithm must cater for 


Figure 9.15 
Decomposition of polygon b 
into two polygons b and c 
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Figure 9.16 

As Fig. 9.14 but the solids no 
longer overlapping in the x-y 
plane. The looping situation 
is avoided by a full xy 
overlap test 


the most expensive (and complex) is the full x-y overlap test. For 
this reason, an efficient implementation of the algorithm would not 
necessarily apply them in the above order. In fact, our version of the 
algorithm will be structured so as to render the full x-y overlap test 
unnecessary. Whenever a test succeeds, a ‘clash’ is resolved. This 
means that it is better to apply the ‘cheaper’ tests first. 


9.5 PROGRAM IMPLEMENTATION OF THE DEPTH SORT 
ALGORITHM 


We now move on to the implementation of the algorithm. Both back 
face elimination and the depth sort algorithm are long programs 
with large associated data structures. For a picture of any complex-’ 
ity they will also take a long time to execute. The only really practic- 
able implementation on a micro is a two pass system. The image is 
‘passed’ through the first program, back face elimination, generat- 
ing an image with hidden faces removed which is stored on file. The 
second program, the depth sort algorithm, is then loaded and the 
output from the first pass used. 

An alternative approach is to use a compacted data structure 
together with indirection operators. This will reduce data space 
requirements and execution time. Data structures like this were 
illustrated in Chapter 5. However, for the purpose of explanation 
we will not adopt this approach but stick to conventional array 
structures. This will make the program easier to write and 
understand. 


Data structure and programming scheme 
It is convenient to re-use the data structure used in back face 
elimination. It must also allow new vertices and surfaces to be 
added when an existing polygon has to be split into two. The 
previous data structure was convenient and economical. There are 
many shared vertices in a scene consisting of convex polyhedra. We 
can simply extend this by setting up a two-level pointer system for 
representing the priority ordering. This is shown in Figure 9.17. 
This structure, with some wastage, will easily allow new surfaces 
to be added. For example, in the scene of Figure 9.4, surface b will 
eventually be split by surface a, generating two new surfaces and 
deleting one old surface. To keep the data structure and associated 
programming as simple as simple as possible we will deal with 
single (non-convex) objects. The algorithm can easily be extended to 
deal with multi-object scenes involving an object array as used in 
Chapter 8. 


Surface priority array Surface array 
im pat eel 


Although the algorithm will work more quickly if we first apply 
back face elimination, then apply the depth sort algorithm to the 
remaining faces, this will make the program very long. We will 
therefore use the depth sort algorithm to remove back faces. In 
practice it is best to make up a program by merging both algorithms, 
perhaps by using an intermediate file as suggested above. 

Again to keep the program short we will completely omit the full 
x-y overlap test. Any problems that would be resolved by the full 
x-y overlap test are resolved by extra plane splitting. We adopt this 
approach because the full x-y overlap test is extremely complex. It is 
also very expensive and the algorithm needs careful structuring to 
make its use cost effective. Again in this check we could adopt a 
hierarchy of tests invoking a minimax check on individual lines 
before moving on to a full boundary intersection check. Also, there 
are numerous special cases where this is not enough. 


Depth sort algorithm - main program structure 

We start by transforming the vertices into eye coordinates and 
screen coordinates. This is done exactly as before but the 
transformed vertices are loaded into array ‘eyevertex’. The first 
three columns in this array contain the x, y and z eye coordinates. 
The next two columns contain the x and y screen coordinates. 
PROCtransform is now as shown in Program 9.2. Another function 
that we perform once only is to evaluate the coefficients of the plane 
equation for each surface. Even when a surface is split, the two parts 
retain the same plane coefficients. 

The various initialisation procedures together with the overall 
structure of the algorithm appear as Program 9.2. 

The program manipulates a priority list of surfaces in the array 
‘priority’. The first entry in this array will eventually be the number 
of the surface that should be plotted first, the second entry will be 
the number of the surface that should be plotted second, and so on. 
Initially, the surfaces are simply listed in numerical order. 

The main program loop repeatedly calls PROCselectnextsurface 
(always preceded by a preliminary sort of the surfaces on the basis of 
their maximum z coordinates). At each execution of this loop, the 
variable ‘next’ is increased by 1 and PROCselectnextsurface then 
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Figure 9.17 
Simple data structure used to 
indicate surface priority 
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maxverts=30 : maxsurfs=20 : maxedges=9 
DIM eyevertex(5,maxverts), vertex(3,maxverts), 
surface(maxsurfs ,maxedges) 
DIM Largestz(maxsurfs), smallestz(maxsurfs) 
DIM noofvertices(maxsurfs), priority (maxsurfs) 
DIM aCmaxsurfs), b(maxsurfs), c(maxsurfs), d(maxsurfs) 
DIM previous lymoved(maxsurfs) 
DIM oldvert(maxedges), olddummy%(maxedges) 
DIM succeeded%(maxsurfs,maxsurfs), dummyedge%(maxsurfs ,maxedges) 


roundoff = 0.5 
PROCinitialise 
costheta=COS(RAD(theta)) : sintheta=SINCRAD(theta)) 
cosphi=COSC(RAD(phi)) =: sinphi=SINCRAD(phi)) 
xview = rho*xsinphixcostheta 
yview = rho*sinphixsintheta 
zview = rho*xcosphi 
PROCinitviewtransform(rho,theta,phi) 
FOR vertexno = 1 TO verts 
PROCtransformvertex(vertexno) 
NEXT vertexno 
next = 0 
PROCinitialise priors 
PROCinitialise planecoeffs 
REPEAT 
next = next+1 
PROCz_sort (next) 
PROCselectnextsurface 
PRINT "Surface priority List after pass "; next 
PRINT TAB(2); : PROCprintprior (next) 


UNTIL next = surfs 

PROCsave 

END 

DEF PROCselectnextsurface 
PROCmarksurfaces 
Pp = priority(next): qnext = next+1 
REPEAT 


q = priority(qnext) 
IF FNzextent_over Lap(p,q) THEN PROCresolve_over lap 
ELSE qnext = qnext+1 
UNTIL qnext > surfs 
ENDPROC 


DEF PROCresolve_over lap 
IF succeeded%(p,q) THEN qnext = qnext+1:ENDPROC 
PROCxy_minimax(p,q) 
IF succeed THEN 
succeeded%(p,q)=TRUE : succeeded%(q,p)=TRUE : 
qnext = qnext+1 : ENDPROC 
PROCpq_test (p,q) 


Program 9.2 Initialisation of data structures and main program structure for the depth sort algorithm. 
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IF succeed THEN 
succeeded%(p,q)=TRUE : qnext = qnext+1 : ENDPROC 
PROCqp_test (p,q) 
IF succeed THEN 
succeeded%(p,q)=TRUE : qnext = qnext+1 : ENDPROC 
PROCpq_test (q,p) 
IF succeed THEN 
IF NOT previouslymoved(q) THEN PROCpriority_swop : ENDPROC 
pqtestresult=succeed 
PROCqp_test (q,p) 
IF succeed THEN 
IF NOT previouslymoved(q) THEN PROCpriority_swop 
IF succeed AND pqtestresult THEN PROCpriority_swop 
IF succeed THEN PROCpLlane_spLit(q,p) 
ELSE PROCpLlane_spLit(p,q) 
PROCmarksurfaces 
ENDPROC 


DEF PROCpriority_swop 
previous lymoved(p)=TRUE 
priority(next) = q 
priority(qnext)= p 
p = q: q = priority(qnext) 
qnext = next + 1 
succeeded% (p,q) =TRUE 

ENDPROC 


DEF PROCmarksurfaces 
LOCAL n 
FOR n=next TO.surfs 
previous lymoved(priority(n))=FALSE 
NEXT n 
ENDPROC 


DEF PROCinitialise 
LOCAL v, vertexno,surfaceno 


ENDPROC 
ENDPROC 


READ verts, surfs 
rho=700 : theta =45 : phi =60 : screendist=700 
FOR v = 1 TO verts 
READ vertex(1,v), vertex(2,v), vertex(3,v) 
NEXT v 
FOR surfaceno = 1 TO surfs 
READ noofvertices(surfaceno) 
FOR vertexno = 1 TO noofvertices(surfaceno) 
READ surface(surfaceno, vertexno) 
NEXT vertexno 
NEXT surfaceno 
ENDPROC 
DATA 19,14 
DATA 180,0,0,  180,0,50, 180,20,75,  180,20,120 
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870 DATA 180,60,120,  180,60,75, 180,80,50, 180,80,0 
880 DATA 0,80,0, 0,0,0, 140,40,100, 140, 60, 75 

890 DATA 0,40,100, 0,80,50, 140,20,75, 160,40,250 

900 DATA 140,60 ee 140,20,120, 0,0,50 

910 DATA 8,6, 3,2,1,8,7 

920 DATA 4,1 
930 DATA 4,9 
940 DATA 6,1 
950 DATA 4,1 
960 DATA 4,1 
970 DATA 6,1 
980 DATA 4,3 
990 DATA 3,5 
1000 DATA 3,1 
1010 DATA 3,1 
1020 DATA 3,4 
1030 DATA 5,1 
1040 DATA 5,11, °15, 18, 17, 12 


1050 DEF PROCinitviewtransform(rho, theta, phi) 
1060 LOCAL sintheta,costheta,sinphi,cosphi 


1070 sintheta = SINCRAD(theta)): costheta = COS(RAD(theta)) 
1080 ~—s sinphi = SINCRAD(phi)) =: cosphi = COSC(RAD(phi)) 
1090 va = -sintheta : vb = costheta 

1100 ve = -costheta*cosphi : vf = -sintheta*cosphi 

1110 vg = sinphi 

1120 = vi = -costheta*xsinphi : vj = -sintheta*sinphi 

1130 vk = -cosphi : vl = rho 


1140 ENDPROC 
1150 DEF PROCtransformvertex(v) 


1160 PROCviewtransform(v, vertex(1,v), vertex(2,v), vertex(3,v)) 
1170 PROCperspecttransform(v, eyevertex(1,v), eyevertex(2,v), 


eyevertex(3,v), screendist) 
1180 ENDPROC 


1190 DEF PROCviewtransform(v, x, y, z) 

1200 eyevertex(1, v) vakx + vb*y 

1210 eyevertex(2, v) verx + vfxy + vgkz 

1220 eyevertex(3, v) = vikx + vjxy + vk*z + vl 
1230 ENDPROC 


1240 DEF PROCperspecttransform(v, xe, ye, ze, d) 
1250 =eyevertex(4,v) = d*xe/ze 

1260 =eyevertex(5,v) dxye/ze 

1270 ENDPROC 


1280 DEF PROCinitialise_priors 

1290 LOCAL surfaceno 

1300 FOR surfaceno = 71 TO surfs 

1310 largestz(surfaceno) = FNlargestxyz(surfaceno,3) 
1320 smallestz(surfaceno) = FNsmallestxyz(surfaceno,3) 


Program 9.2 continued 
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priority(surfaceno) = surfaceno 
NEXT 
ENDPROC 
DEF FNlargestxyz(surfaceno,coord) 


LOCAL max, i: max = -10000 
FOR i = 1 TO noofvertices(surfaceno) 
IF eyevertex(coord,surface(surfaceno, i)) > max THEN 
max = eyevertex(coord,surface(surfaceno,i)) 
NEXT i 
=max 


DEF FNsmallestxyz(surfaceno,coord) 
LOCAL min, i: min = 10000 
FOR i = 1 TO noofvertices(surfaceno) 
IF eyevertex(coord,surface(surfaceno, i)) < min THEN 
min = eyevertex(coord,surface(surfaceno,i)) 
NEXT i 
=min 


DEF PROCinitialise planecoeffs 
LOCAL s 
FOR s = 1 TO surfs 
PROCpLanecoeffs(s) 
NEXT s 
ENDPROC 


DEF PROCpLanecoeffs(surfacen) 
LOCAL x1,x2,x3,y1,y2,y3,21,22,Z3,1 
= eyevertex(1,surface(surfacen,1)) 
eyevertex(1,surface(surfacen,2)) 
eyevertex(1,surface(surfacen,3)) 
eyevertex(2,surface(surfacen,1)) 
eyevertex(2,surface(surfacen,2)) 
eyevertex(2,surface(surfacen,3)) 
eyevertex(3,surface(surfacen,1)) 
eyevertex(3,surface(surfacen,2)) 
eyevertex(3,surface(surfacen,3)) 
a(surfacen) y 1* (22-23) t+y2* (23-21) t+y3*(z1-22) 
b(surfacen) -x 1% (22-23) -x2% (23-21) -x3*(z1-22) 
c(surfacen) X1%Cy2-y3) +x2%Cy3-y1) +x3*Cy1-y2) 
d(surfacen) -x 1k Cy2%Z3-y3%22)+x2% Cy 1*23-y3%z1) 
-x3*(y1*z2-y2*z1) 


< 
~ 
| | | 


ENDPROC 


DEF PROCprintprior(last) 
LOCAL i 
FOR i = 1 TO Last 
PRINT; priority(i);" "; 
NEXT : PRINT 
ENDPROC 
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Figure 9.18 
Mutually intercepting planes 
in the church scene 


Figure 9.19 (opposite) 
Various stages in the depth 
sort algorithm: the ‘worm’s 
eye’ viewpoint is = -140°, 
6 = 10° 


ensures that the location ‘priority(next)’ contains the number of a 
surface that is lower in priority than all the surfaces whose numbers 
are in the following locations. This involves comparing the surface 
that was initially placed in that location (by PROCz_sort) with all the 
surfaces in locations ‘next+1’ onwards. This process is organised by 
the loop in PROCselectnextsurface. This loop repeatedly compares 
the surface in ‘priority(next)’, surface P say, with the surface in 
‘priority(qnext)’, surface Q say. If all goes well, then ‘qnext’ will 
increase steadily until all comparisons with surface P have been 
made and we have confirmed that P is indeed the next surface in the 
priority ordering. 

Success in any one of three tests will confirm that P has lower 
priority than Q. These tests are implemented by PROCxy_minimax, 
PROCpq_test and PROCgqp test. As soon as one of these tests is 
successful, ‘qnext’ is increased ready for testing P against the next 
surface. In addition, a successful test result is recorded in the array 
‘succeeded%’. This is used to prevent the same tests from being 
repeated later after any reordering. 

If all three tests fail, then there are two possibilities, either the 
surfaces are in the wrong order and must be interchanged in the 
priority list, or one of the surfaces must be split in two by the plane 
defined by the other surface. To decide which action is appropriate, 
PROCpq test and PROCagp test are applied to the two planes in 
reverse order. If both of these retests fail, then the two surfaces, P 
and Q, have the mutual cutting property described earlier, and one 
of them must be split in two by a call of PROCplane split. 

If one of the two retests succeeds, then an ‘obvious’ course of 
action would be to exchange P and Q in the priority list and check 
the surface now in the ‘next’ position against all the surfaces that 
now come after it in the list. This would involve resetting ‘qnext’ to 
‘next+1’. However, this could result in a continuous loop with 
several surfaces cycling in the ‘next’ position. Such a situation is 
illustrated in Figure 9.18. For this reason, we keep a record (in array 
‘previouslymoved’) of any surface that is swopped out of the ‘next’ 
position. If there is an attempt later to move this surface back into 


. e . 
Viewpoint 7 
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the ‘next’ position, then we must consider whether this is 
appropriate. 

Such cycling situations could be resolved by using a full x-y 
overlap test, but we prefer to resolve them by further plane-split- 
ting. This is what is done, unless the two surfaces do not cut one 
another. (This is the case if both the pq-test and the qp-test succeed.) 
In this situation, swopping is allowed with a view to applying plane 
splitting at another point in the cycle. 

Figure 9.19 shows stages in priority plotting for the church scene, 
which as we have already discussed, is a non-convex solid. For this 
particular viewpoint two extra surfaces are generated making a total 
of 16. The unusual viewpoint (@ = -140, 6 = 10) is a ‘worm’s eye’ 
view and was chosen because it graphically illustrates the way in 
which the lower priority surfaces are eliminated, leading to a final 
object that paints out the first 13 surfaces that are plotted. In (a) to 
(d), parts of the steeple are visible and we are looking up into it. In 
(e) and (f) all of the steeple and the roof is obscured by the final three 
surfaces. 

Finally, we will explain the detailed operation of each of the 
important subsidiary procedures used in our implementation of the 
algorithm. 


Depth sort algorithm — initial depth sort 

To sort the surfaces into order we proceed as follows. For every 
surface we find the largest z coordinate (eye system) and sort the 
surface numbers in the array ‘priority’ on the basis of these values. 
(Figure 9.17). This is a simple ordering exercise carried out in 
PROCz sort. (Program 9.3) In this procedure we use a bubble sort. 


Depth sort algorithm — z-extent overlap 

During the course of the algorithm, the check for possible z—-extent 
overlap is carried out by PROCz_overlap. Largest z values for each 
surface are held in array ‘largestz’ and smallest z values in array 


1760 DEF PROCzsort(start) 

1770 LOCAL last, lastmoved,j,temp 
1780 last = surfs 

1790 REPEAT 


1800 Lastmoved = 0 
1810 FOR j = start + 1 TO last 
1820 IF largestz(priority(j)) > largestz(priority(j-1)) THEN 


temp = priority(j): priority(j) = priority(j-1): 
priority(j-1) = temp: Llastmoved = j-1 

1830 NEXT j 

1840 last = lastmoved 

1850 UNTIL Last <= start 

1860 ENDPROC 


Program 9.3 Procedure to sort surfaces on largest z-coordinates. 


‘smallestz’. The procedure is given as Program 9.4. Note that in a 
convex polyhedron with a small number of faces there will be a large 
percentage of adjacent faces where the z—extent overlap condition 
applies. 


Depth sort algorithm ~— xy-minimax 

This is implemented as PROCxy_minimax. Note that this test must 
be applied to the screen coordinates that were obtained from the eye 
coordinates using PROCperspecttransform. Initially this finds, for 
each surface, the smallest x, smallest y, largest x and largest y values 
for the two surfaces being compared. These searches are carried out 
in FNsmallestxyz and FNlargestxyz respectively. Once these values 
have been found a pair of IF statements is all that is required to 
implement the test. The procedure is presented as Program 9.5. 


Depth sort algorithm — pq and qp tests 

These tests are ‘symmetrical’ and we can use the same procedure for 
each, providing the order of the pair of surfaces is swopped, and, 
the sign of the fail condition is changed. This initial manipulation is 
carried out in PROCpq test and PROCap test (Program 9.6), both of 


1870 DEF FNzextent_over lap(p,q) 

1880 LOCAL largestzq,smallestzp 
1890 largestzq = lLargestz(q) 

1900 smallestzp= smallestz(p) 

1910 fail = largestzq > smallestzp 
1920 =fail 


Program 9.4 Function to detect z-extent overlap of surfaces. 


1930 DEF PROCxy_minimax(p,q) 
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1940 LOCAL smallestxp, smallestxq, smalleestyp, smallestyq, 


largestxp, largestyp, largestxq, largestyq 
1950 smallestxp = FNsmallestxyz(p,4) 


1960 smallestyp = FNsmallestxyz(p,5) 
1970 lLargestxp = FNlargestxyz(p,4) 
1980 largestyp = FNlargestxyz(p,5) 
1990 smallestxq = FNsmalLlestxyz(q,4) 
2000 smallestyq = FNsmallestxyz(q,5) 
2010 largestxq = FNlargestxyz(q,4) 
2020 largestyq = FNlargestxyz(q,5) 


2030 IF largestxp > largestxq THEN diffx= smallestxp 
ELSE diffx= smallestxgq 

2040 IF largestyp > lLargestyq THEN diffy= smallestyp 
ELSE diffy= smallestyq 

2050 succeed = diffx >=0 OR diffy >= 0 

2060 ENDPROC 


Program 9.5 Procedure to carry out the x-y minimax test on surfaces. 


Largestxq 
largestxp 
largestyq 
largestyp 
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2070 DEF PROCpq_test (surfacep,surfaceq) 
2080 =fail = +1 


2090 = PROCpLanetest(surfacep,surfaceq) 
2100 ENDPROC 


2110 DEF PROCqp_test (surfacep,surfaceq) 
2120 =fail = -1 

2130 PROCpLanetest(surfaceq,surfacep) 
2140 ENDPROC 


2150 DEF PROCplanetest(surface1,surface2) 
2160 LOCAL i,x,y,z,a,b,c,d 

2170 =a=a(surface2) :b=b(surface2) 

2180 c=c(surface2) :d=d(surface2) 


Program 9.6 Procedures to carry out p-q and q-p tests for surface priority. 


which call PROCplane_test. This procedure evaluates the coeffi- 
cients of the plane of the second surface. It then checks the position 
of every vertex in the first surface to see which side of the plane the 
vertex is on. The equation of the plane of the second surface is 
obtained from the arrays a, b, cand d that were initialised at the start 
of the program. Substituting each vertex from the other surface into 
this equation determines on which side of the plane the vertex lies. 
The REPEAT loop should terminate immediately a test fails. If all the 
vertices in a surface pass the test it succeeds. 


Sor DEF PROCpLane_split(surface1,surface2) 

310 LOCAL oldverts,x,y,z,1,a,b,c,d,newvertex 
2320 = oldverts=noofverti ces(surfacel) 
2330 FOR i=1 TO oldverts 


2340 oldvert(i)=surface(surface1,i) 
2350 olddummy% (i )=dummyedge% (surface1,i) 
2360 NEXT i 


2370 3 §=a=a(surface2) sb=b(surface2) 
2380 3=c=c(surface2) :d=d(surface2) 


2390 =x = eyevertex(1,oldvert(1)) 
2400-—s—y = eyevertex(2,oldvert(1)) 
2410 z = eyevertex(3,oldvert(1)) 


2420 = oldresult = a*x + bey + cez + d 

2430 PROCcompareplaneandvert(1) 

2440 nearest1 = reached-1: nearest2 = reached 

2450 PROCcompareplaneandvert (reached) 

2460 IF reached = 1 THEN nearest3 = oldverts 
ELSE nearest3 = reached -1 

2470 ~=nearest4 = reached 

2480 PROCfindnewvertex(nearest1, nearest2) 

2490 newv1 = newvertex 


Program 9.7 Procedures for splitting a surface into two. 
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2190 = fail = fail*d 


2200 i=0 

2210 REPEAT 

2220 i=it+t 

2230 xX = eyevertex(1,surface(surfacet,i)) 

2240 y = eyevertex(2,surface(surface1,i)) 

2250 z = eyevertex(3,surface(surface1,i)) 

2260 result = a*x+b*y+c*z+d 

2270 IF ABSCresult) < roundoff THEN succeed = TRUE 


ELSE succeed = (SGN(result) <> SGNCfail)) 
2280 UNTIL i = noofvertices(surface1) OR NOTCsucceed) 
2290 ENDPROC 


Note the way in which the test at the end of PROCplane_test has 
been structured to avoid problems due to round-off errors. If a point 
is close to the surface (on either side) it passes, regardless of sign. 
For shared vertices, of which there are many in typical scenes, 
‘result’ should evaluate to zero. However, because of round-off 
errors it may go slightly negative when it is supposed to be consis- 
tent with a set of positive numbers, or, vice versa. The only safe 
course of action is to accept any result near zero (to within a round- 
off error) as passing the test and this is exactly what we do. 


2500 PROCfindnewvertex(nearest3,nearest4) 

2510 newv2 = newvertex 

2520 PROCaddnewsurface(surface1) 

2530 + PROCreplaceoriginalsurface(surface1) 

2540 PRINT "Surface ";surface1;" split by surface ";surface2 
2550 PRINT TAB(5)"New surfaces: "; surface1;",";surfs 

2560 ENDPROC 


2570 DEF PROCcompareplaneandvert (start) 
2580 LOCAL i 

2590 signchange = FALSE 

2600 i = start 

2610 REPEAT 


2620 i=i+t+t 

2630 IF i > oldverts THEN i = 1 

2640 x = eyevertex(1,oldvert(i)) 

2650 y = eyevertex(2,oldvert(i)) 

2660 z = eyevertex(3,oldvert(i)) 

2670 result = a*x + bey + cez + d 
2680 IF ABSColdresult)>=roundoff THEN 


IF ABSCresult)>=roundoff THEN 
signchange=SGNC(result) <> SGNColdresult) 


continued 
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2690 IF ABSC(result)>roundoff THEN oldresult = result 
2700 UNTIL signchange 

2710 reached = i 

2720 ENDPROC 


2730 DEF PROCfindnewvertex(v1,v2) 
2740 LOCAL x1,x2,y1,y2,21,22,S 


2750 x1 = eyevertex(1,oldvert(v1)) 
2760 y1 = eyevertex(2,oldvert(v1)) 
2770 z1 = eyevertex(3,oldvert(v1)) 


2780 IF ABS(a*x1+b*y1+c*z1+d)<roundoff THEN 
newvertex = oldvert(v1) : ENDPROC 

2790 x2 = eyevertex(1,oldvert(v2)) 

2800 y2 = eyevertex(2,oldvert(v2)) 

2810 z2 = eyevertex(3,oldvert(v2)) 

2820 s = (-d - a*x1 - byt - c*z1)/ 
(a*(x2-x1) + b*Cy2-y1) + c*(z2-2z1)) 

2830 newx = x1 + s*(x2-x1) 

2840 newy = y1 + s*(y2-y1) 

2850 newz = 21 + s*(z2-z1) 

2860 verts=vertst1? = newvertex=verts 

2870 = eyevertex(1,newvertex) = newx 

2880 =eyevertex(2,newvertex) = newy 

2890 ~=—s eyevertex(3,newvertex) newz 

2900 PROCperspecttransform(newvertex, newx, newy, newz, screendist) 

2910 ENDPROC 


2920 DEF PROCaddnewsurface(original) 
2930 LOCAL i,j,s 

2940 surfs = surfst+1: s = surfs 

2950 = surface(s,1) = newv2 

2960 dummyedge%(s,1) = TRUE 

2970 = j = 2: i = nearest4-1 

2980 REPEAT 

2990 i=i+1 : IF i > oldverts THEN i = 1 
3000 surface(s,j) = oldvert(i) 

3010 dummyedge%(s,j) = olddummy%(i) 
3020 j = j+1 


Program 9.7 continued 


Now the second application of the pq and qp tests can be ac- 
complished by using the same procedure, PROCplane_test, but this 
time swopping the parameters in the main program. 

The complete program is tested on the church scene used in 
Chapter 8. As well as being a non-convex object, it also exhibits from 
certain viewpoints, mutually intercepting planes. Some of these 
possibilities are shown in Figure 9.20 and are resolved, as we have 
already discussed by plane splitting. 


Depth sort algorithm — plane splitting 
If a plane has to be split into two we add one new surface into the 


3030 UNTIL.i = nearest? 

3040 ~=priority(s) = s 

3050 ~=orIF oldvert(nearest1)=newv1 THEN j = j-1 

ELSE surface(s,j) = newv1 : 

dummyedge%(s,j) = olddummy%(nearest2) 

3060 as) = aCoriginal) 

3070 §=b(s) = bCoriginal) 

3080 c(s) = cloriginal) 

3090 = d(s) = dCoriginal) 

3100 noofvertices(s) = j 

3110 largestz(s) =FNLargestxyz(s,3) 

3120 = smallestz(s)=FNsmal Lestxyz(s,3) 

3130 FOR sno=next TO surfs-1 : os=priority(sno) 

3140 succeeded%(s ,os)=succeeded%(original,os) 

3150 succeeded%(os,s)=succeeded%(os original) 

3160 NEXT sno 

3170 ENDPROC 


3180 DEF PROCreplaceoriginalsurface(original). 
3190 ~=LOCAL i,j 
3200 = surfaceCoriginal,1) = newv1 
3210 dummyedge%(original,1) = TRUE 
3220) j =2: i = nearest2-1 
3230 REPEAT : i=i+1 
3240 IF i>oldverts THEN i=1 
3250 surface(original,j) = oldvert(i) 
3260 dummyedge%(original,j) = olddummy%(i) 
3270 j = j+1 
3280 UNTIL i=nearest3 
3290 IF oldvert(nearest3)=newv2 THEN j = j-1 
ELSE surface(original,j) = newv2 : 
dummyedge%(original,j) = olddummy%(nearest4) 
3300 §=noofvertices(original) = j 
3310 largestz(original) = FNlargestxyz(original,3) 
3320 =smallestz(original)= FNsmallestxyz(original ,3) 
3330 ENDPROC 


data structure. The other new surface replaces the original surface in 
its original position in the data structure. We also have to find new 
vertices for each new surface in general, although very often a plane 
will split through existing vertices. 

PROCplanesplit calls a number of subsidiary procedures whose 
function should be obvious from the procedure names. These are 
listed together with PROCplane_split. The sense of 
PROCplane_split should be studied in conjunction with Figure 9.21, 
which shows the scheme used and the associated variables. Sur- 
face] is the surface that is being split by surface2. We travel through 
the vertex list of surfacel and compare each vertex with the plane 
coefficients of surface2. (PROCcompareplaneandverts). When a 
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Figure 9.20 
Mutually intercepting planes 
in the church scene 


| 
(“Plane of 14 


Pianes of 4 and 14 intercept each other 


change of sign is encountered we know that we have crossed over 
from one side of surface2 to the other. This technique defines the 
pairs of vertices nearest to the intersection points — nearestl, 
nearest2, nearest3 and nearest4. The actual points of intersection 
(newx1, newyl1, newz1) and (newx2, newy2, newz2), which form 
the new vertices, are found by defining parametric equations for the 
lines defined by nearest1 and nearest2, and nearest3 and nearest4 
(PROCfindnewvertex). Actually, if the plane of surface2 was 
crossed at a vertex of surfacel, then the number of this vertex is 
returned by PROCfindnewvertex. In general, the point of intersec- 
tion between the lines and the plane of surface2 are calculated. The 
two new surfaces are thus defined by a list of vertices plus two new 
ones common to each half of the split plane. One new surface is 
added to the data structure in the original position 
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3340 DEF PROCsave 

3350 LOCAL fileno,v,c,priorityno,s,e 
3360 fileno = OPENOUTC"dump”) 

3370 PRINT# fileno, verts,surfs 

3380 FOR v = 1 TO verts 

3390 FOR c = 4 T0 5 

3400 PRINTH fileno,eyevertex(c,v) 
3410 NEXT : NEXT 

3420 FOR s = 1 TO surfs 


3430 PRINT# fileno, noofvertices(s) 
3440 FOR e = 1 TO noofvertices(s) 
3450 PRINT# fileno, surface(s,e), dummyedge%(s,e) 


3460 NEXT = NEXT 

3470 FOR p = 1 TO surfs 

3480 PRINT# fileno,priority(p) 
3490 NEXT p 

3500 CLOSE# fileno 

3510 ENDPROC 


Program 9.8 Procedure to save the priority list produced by the depth sort algorithm. 


(newx1, newy1, newz1) 


Nearest 2 


Surface 2 


Start vertex 


Nearest 3 


Nearest 4 


(newxz, newyz, newzz) 
Figure 9.21 
The plane splitting scheme 
used by PROCplanesplit: 
surface 1 is split by surface 2 
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10 maxverts=30 : maxsurfs=20 : maxedges=9 
20 DIM x(maxverts), y(maxverts), noofvertices(maxsurfs), 

surface(maxsurfs,maxedges), dummyedge%(maxsurfs,maxedges), priority(maxsurfs) 
30 DIM colnextv maxverts 


40 scale=3 

50 roundoff=0.01 
60 PROCload 

70 MODE 0 

80 VDU 29,640;512; 
90 PROCdrawsurfs 
100 END 


110 DEF PROCdrawsurfs 

120 LOCAL s,e 

130 FOR p = 1 TO surfs 

140 s=priority(p) 

150 verts=noofvertices(s) 
160 GCOL 0,1 

170 PROCcolourfill(s) 

180 GCOL 0,0 


190 MOVE x(surface(s,verts)),y(surface(s,verts)) 
200 FOR e = 1 TO verts 
210 IF dummyedge%(s,e) THEN 


MOVE x(surface(s,e)),y(surface(s,e)) 
ELSE DRAW x(surface(s,e)),y(surface(s,e)) 
220 NEXT e 
230 PRINT ;s : G = GET 
240 NEXT p 


Program 9.9 Program to draw scene using the priority list created by depth sort algorithm. 


(PROCreplaceoriginalsurface) and the other is added as a new sur- 
face (PROCaddnewsurface). The plane splitting procedure, 
together with its subsidiary procedures, is presented as Program 
9.7. 


Saving and plotting the scene 

The procedure PROCsave (Program 9.8) transfers various parts of 
the depth sort algorithm data structure into a file and the informa- 
tion in this file can then be used later by Program 9.9 to plot the 
surfaces in the correct order. In addition to the surface list and the 
priority list, the only vertex information that is needed is the list of 
screen coordinates from the last two coluinns of the ‘eyevertex’ 
array. 

One further piece of information needed in the plotting program 
is an indication of which edges were not present in the original 
object but have been introduced by plane splitting. This information 
is recorded by the plane splitting procedure in the logical array 
‘dummyedge%’ which has an entry for each edge in the scene. 
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250 ENDPROC 
260 DEF PROCLoad 


270 
280 
290 
300 
310 
320 
330 
340 
350 
360 
370 
380 
390 
400 
410 
420 
430 


440 
450 
460 
470 
480 
490 


LOCAL fileno,v,s,e 
fileno = OPENINC'dump") 
INPUT# fileno, verts,surfs 
FOR v = 1 TO verts 
INPUT# fileno, x(v),y(v) 
x(vd=scale*x(v) : y(v)=scalery(v) 
NEXT v 
FOR s = 1 TO surfs 
INPUT# fileno, noofvertices(s) 
FOR e = 1 TO noofvertices(s) 
INPUT# fileno, surface(s,e), dummyedge%(s,e) 
NEXT : NEXT 
FOR p=1 TO surfs 
INPUT# fileno,priority(p) 
NEXT p 
CLOSE# fileno 


ENDPROC 
DEF PROCcolourfill(s) 


MOVE x(surface(s,2)),y(surface(s,2)) 
FOR e = 1 TO verts 
MOVE x(surface(s,1)),y(surface(s,1)) 
PLOT 85, x(surface(s,e)),y(surface(s,e)) 
NEXT e 


500 ENDPROC 
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10 MODE 0 


20 FOR wave = 1 TO 3 
30 READ sx, sy, f, s 
50 VDU 29, sx;sy; 
0 TO 720 STEP 10 
O THEN MOVE O, 0 
ELSE DRAW theta, s*SINCRAD(f*theta) ) 


60 FOR theta 
70 IF theta 


80 NEXT theta 
90 NEXT wave 


10 A lexicon of mathematical 
shapes 


This chapter consists of a set of programs that produce shapes under 
control of a mathematical formula. Most of the programs contain 
parameters that vary some aspect of the shape of the function and 
allow experimentation. The functions are mainly ‘circular’ functions 
and an illustration or set of illustrations accompanies each program. 

The mathematics is presented without detailed explanation, in 
the belief that even a person with little or no mathematical 
knowledge can easily experiment with the shapes and gain 
familiarity with the functions and how their form is controlled by 
running the programs. The mathematics is presented in a very non- 
rigorous manner and many of the formulae ‘overlap’. This means 
that although, for example, a cardioid formula is used to generate a 
particular shape, it may well be possible to generate exactly the 
same shape using the Lissajous formula. This is because most of the 
functions are ‘circular’ or harmonic which means that they are based 
on sine waves. 

Individual shapes can be used as motifs in the decorative techni- 


100 DATA 100, 540, 3, 100 
110 DATA 100, 200, 4, 150 
120 DATA 100, 800, 1, 50 


Program 10.1 Simple sine waves. 
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ques described in other chapters and the motifs can be combined in 
any way you choose. Again you are limited only by your imagina- 
tion and can experiment freely with the variable parameters of each 
shape. One of the fascinating aspects of using mathematically 
generated shapes is that unless you are an expert mathematician, 
the outcome of using a certain formula with particular parameters is 
unknown at the outset. There is literally an infinite number of 
possible variations. 

Finally the aesethic appeal of the patterns can always be enhanced 
by using colour. This is dealt with at the end of the chapter where 
suggestions for introducing colour are given. 


10.1 SINE WAVES 
Program 10.1 displays the familiar function: 
y = sind 
The variable parameters in this function are the amplitude or height 


of the wave (s in the program) and the frequency or rate of undula- 
tion (variable f in the program). The equation used in the program is: 


y =s sin(f®) 


Modulating the amplitude of a sine wave 
One of the things we can do with periodic functions, such as sine 
waves, is modulate them with another function. A periodic function 
is one whose ‘pattern’ repeats itself over and over again. If in the 
case of the sine wave we replace s, a constant, with a function, then 
the amplitude of the sine wave will itself vary. 

In Program 10.2 we have replaced s with another sine wave. The 
function is 


y = s sin(f19) sin(f20) 


Mathematical shapes 


Figure 10.1 
Sine waves of different 
frequency and amplitude 
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10 MODE 0 

20 FOR wave = 1 TO 3 

30 READ sx, sy, f1, 

40 VDU 29, sx;sy; 

50 FOR theta = 0 TO 

60 IF theta = O TH 
ELSE DRAW theta 

70 + =NEXT theta 

80 NEXT wave 


90 DATA 100, 200, 1,20, 


f2, s 
1080 STEP 1 


EN MOVE 0, 0 
7, S*SINCRAD(F1*theta))*SINCRAD(f2*theta)) 


150 


100 DATA 100, 500, 1, 10, 100 


110 DATA 100,800, 2,30, 


150 


Program 10.2 Sine waves modulated by other sine waves. 


Figure 10.2 
Modulating the amplitude of 
a sine wave 


In the bottom illustration f2 = 20f1, in the middle illustration f2 = 
10f1 and f1 is the same in both cases. The top example shows the 
effect of increasing both fl and f2. Note the not unpleasing inter- 
ference effect in the bottom example caused by the limited x 
resolution. 


10.2 ELLIPSES AND CIRCLES 


Program 10.3 generates ellipses. With an ellipse we can vary three 
parameters: a, the major diameter, b, the minor diameter, and ‘phi’, 
the orientation or slant of the figure. A circle is just a special case of 
an ellipse with a and b equal. The equation is 


= 1/SQR(cos(theta)*cos(theta)/(axa)+sin(theta) 
*esin(theta)/(b*b)) 


Here we are generating an ellipse by sweeping r through 360°. For 
each value of ‘theta’ we calculate x and y: 
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0 


20 FOR ellipse = 1 TO 6 
30 READ phi, xc, yc, a, b 
40 VDU 29,xc;yc; 


50 4 


a: y = O: PROCtransform 


60 MOVE xt, yt 
70 = FOR: theta = 5 TO 360 STEP 5 


cosine = COS(RAD(theta)): sine = SINCRAD(theta)) 


= 1/SQR(cosine*xcosine/ (axa) +sine*xsine/ (b*b) ) 
= prkecosine: y = rxsine 


PROCtransform 
DRAW xt, yt 


130 NEXT theta 


140 NEXT 
150 END 


ellipse 


160 DEF PROCtransform 


170 xt 
180 =—syt 


= x*COSCRAD(phi)) + y*SINCRAD(phi)) 
=-x*SINCRAD(phi)) + y*COSCRAD(phi)) 


190 ENDPROC 


200 DATA 
210 DATA 
220 DATA 
230 DATA 
240 DATA 
250 DATA 


0, 200, 800, 100, 50 

0, 500, 500, 300, 150 
45, 300, 200, 70, 180 
-60, 700, 400, 100, 200 
0, 1100, 500, 50, 300 
0, 700, 800, 100, 100 


Program 10.3 Ellipses. 


x = rcosd 
y =rsin@ 


To generate a circle (a=b) the above equation reduces to: 


r=a 


Le 


Figure 10.3 
Ellipses of different 
eccentricity and orientation 
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MODE 0 
FOR circle = 1 T0 4 
READ xc, yc, r, a 
VDU 29, xczyc; : MOVE r, O 
FOR theta = 0 TO 360 STEP 1 
x = (rtaxSINCRAD(10*theta)))*COSCRAD(theta)) 
y = (r+axSINCRAD(10*theta)))*SINCRAD (theta) ) 
DRAW x, y 
NEXT theta 
NEXT circle 
END 


DATA 500,500, 300, 100 
DATA 500,500, 200, 70 
DATA 500,500, 100, 30 
DATA 500,500, 50, 10 


Program 10.4 Circles modulated by sine waves. 


Figure 10.4 
Modulating the radius of a 
circle with an ellipse 


and if we wanted a program that would only generate circles, line 70 
in the program would be omitted. PROCtransform rotates the 


ellipse through angle ‘phi’. 


Modulating a radius 


In Program 10.4 we generate a circle by sweeping a radius r through 
360°. However, instead of keeping r fixed, we add a sine wave tor 
(lines 60 and 70). This means that we have taken a sine wave and 
twisted it into a circle. Making such patterns concentric at different 


radii produces a pleasing effect. 


Program 10.5 uses the same idea but this time uses a square wave 
as the modulating function (see line 70). This idea can, of course, 


equally be applied to an ellipse. 


10 MODE 0 

20 FOR circle = 170 4 

30 READ xc, yc, r, a 

40 VDU 29, xc;yc; : MOVE r, O 
50 FOR theta = 0 TO 360 STEP 1 


60 IF theta MOD 10 = O THEN a = ax(-1): r=rta 
70 x = r *COSCRAD(theta)) 

80 y = r *SINCRAD(theta)) 

90 DRAW x, y 


100 NEXT theta 
110 NEXT circle 
120 END 


130 DATA 500,500, 300, 50 
140 DATA 500,500, 200, 70 
150 DATA 500,500, 100, 30 
160 DATA 500,500, 50, 10 


Program 10.5 Circles modulated by square waves. 


10.3 SPIRALS 


Programs 10.6 to 10.9 generate different forms of spirals. Spirals are 
curves of the form: 


r= kd 


which means that as we sweep r through successive revolutions it 
gets bigger and bigger. 

Program 10.6 increases r by an equal increment for each angular 
increment of 10°. Varying the program variable ‘inc’ has the effect 
shown. Note the concentric appearance of the spirals. 

Program 10.7 is the same except that r is increasing non-linearly as 
a function of ‘theta’ (look at line 70). 

Program 10.8 generates sets of such spirals by applying a rota- 


‘0; 
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Figure 10.5 
Modulating the radius of a 
circle with a square wave 
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10 MODE 0 

20 FOR spiral = 1 TO 3 

30 READ xc, yc, r, inc 

40 VDU 29, xc; yc; 

50 MOVE r, O 

60 FOR theta = 0 TO 1800 STEP 10 


70 r=r+ inc 
80 x = reCOSC(RAD(theta)): y = r*SINCRAD(theta)) 
90 DRAW x, y 


100 NEXT theta 
110 NEXT spiral 
120 END 


130 DATA 300, 300, 30, 1 
140 DATA 700,700, 10, 2 
150 DATA 100, 100, 10, .3 


Program 10.6 Simple spirals. 


tional transformation to each. In the illustration eight spirals are 
plotted. Each is subject to a rotation of 36° from the previous one. 
This pattern is used as a basis for some of the motifs in Chapter 4. 

Program 10.9 generates two sets of contra-rotating spirals. A 
variation of this pattern abounds in nature as seed patterns, in, for 
example, fir cones and sunflowers. The natural pattern has different 
numbers of clockwise and counter-clockwise spirals. These are com- 
monly 8,13 or 13,21 or 21,34 and these pairs of numbers are terms in 
a mathematical series known as the Fibonacci series. We have kept 
equal numbers of spirals in each set so that they join up. 


10.4 LISSAJOUS PATTERNS 
Program 10.10 generates the basic Lissajous patterns of order 


Figure 10.6 e 


‘Concentric’ or ‘linear’ spirals 


MODE 0 
FOR spiral = 1 TO 3 
READ xc, yc, r, inc 
VDU 29, xc; yc; 
MOVE r, 0 
FOR theta = 10 TO 1200 STEP 10 
r =r + rexinc/50 
xX = reCOSC(RAD(theta)): y = r*SINCRAD(theta)) 
DRAW x, y 
NEXT theta 
NEXT spiral 
END 


DATA 300, 300, 30, 1 
DATA 700,700, 10, 2 
DATA 100, 100, 10, .7 
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Program 10.7 Non-uniform spirals. 


0,1,2,3,4,5 and 6 (Figure 10.10a). A Lissajous pattern is formed from 


two sine waves: 


x =s1 sinO 
y = s2 sin(o8 + ) 


where o is the order of the pattern. If the frequency of the sine waves 
is equal (o = 1) and > = 90° then a circle results. If one sine wave is 
twice the frequency of the other a figure of eight results. Making o 


equal to 0,1..6 and controlling ‘phi’ produced Figure 10.10a. 


By varying both frequencies simultaneously and making ‘phi’ 90°, 
gives: 


x = s1 sin(o10) 
y = s2 cos(028) 


Figure 10.7 
‘Non linear’ spirals 
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MODE 0 
READ xc, yc, rs, inc 
VDU 29, xc; yc; 
FOR phi = 0 TO 252 STEP 36 
x = rs: y = 0: r = rs: PROCtransform : MOVE xt, yt 
FOR theta = 0 TO 1000 STEP 10 
r =r + reinc/50 
x = reCOSCRAD(theta)): y = r*SINCRAD(theta)) 
PROCtransform 
DRAW xt, yt 
NEXT theta 
NEXT phi 
END 


DEF PROCtransform 
xt = x*COSCRAD(phi)) + y*SINCRAD(phi)) 
yt =-x*SINCRAD(Cphi)) + y*COSCRAD(phi)) 
ENDPROC 


DATA 640, 512, 10, 2 


Program 10.8 Rotating spirals. 


MODE 0 
READ xc, yc, rs, inc 
VDU 29, xc; yc; 


FOR phi = O TO 360 STEP 28 
x = rs: y = 0: r = rs: PROCtransform : MOVE xt, yt 
FOR theta = 360 TO 0 STEP -10 
r =r + rkinc/20 
x = reCOSCRAD(theta)): y = r*xSINCRAD(theta)) 
PROCtransform 
DRAW xt, yt 
NEXT theta 
NEXT phi 


x = rs: O: r = rs: PROCtransform : MOVE xt, yt 
FOR theta = 0 TO 360 STEP 10 
r =r + rxinc/20 
x = reCOSCRAD(theta)): y = r*xSINCRAD(theta)) 
PROCtransform 
DRAW xt, yt 
NEXT theta 
NEXT phi 
END 
DEF PROCtransform 
xt = x*COSCRAD(phi)) + y*SINCRAD(phi)) 
yt =-x*SINCRAD(phi)) + y*COSCRAD(phi)) 
ENDPROC 


DATA 640, 512, 10, 2 


FOR phi = 0 TO 360 STEP 28 
y= 


Program 10.9 Contra-rotating spirals. 


130 
140 
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Figure 10.8 
Spiral sets 


Figure 10.9 
Contra rotating spirals 


MODE O 
FOR wave = 1 T0 6 
READ sx, sy, 0, phi, s 
VDU 29, sx;Ssy; 
FOR theta = 0 TO 360 STEP 5 
IF theta = O THEN 
MOVE s*SINCRAD(theta)),s*SINCRAD(Co*thetatphi) > 
ELSE DRAW s*SINCRAD(theta)) ,s*SINCRAD(Co*thetatphi)) 
NEXT theta 
NEXT wave 


DATA 200, 800, 1, 90, 100 
DATA 550, 750, 2, 0, 200 
DATA 950,800, 3, 90, 150 
DATA 200, 300, 4, 0, 150 
DATA 550, 300, 4, 45, 150 
DATA 950, 300, 5, 90, 150 


Program 10.10 Basic Lissajous figures. 
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Figure 10.10 

Lissajous figures: (a) basic; 
(b) 5,1,5; (c) 11,5,3; (d) 5,9,6; 
(e) 17,13,9; (f) 31,27,23; 

(g) 71,67,63; (h) 9,19,19; 

(i) 5,17,17; (j) 71,19,19 


Now making s itself a sine function, an astonishing variety of 
patterns results. Illustrations in Figure 10.10b to 10.10) show some 
of the patterns that can be obtained by: 


x = 200 sin(a8) cos(o18) 
y = 200 sin(a®) cos(026) 


The program used is given, with colour introduced, as Program 
10.20. The values of ‘a’, ‘ol’ and ‘o2’ caption the illustrations. 


Cardioid patterns 

Although the Lissajous figures produce a wide variety of patterns, 
the control over individual lobes in the pattern is difficult. A pattern 
generating function where it is easier to control lobes is the cardioid. 
Program 10.11 generates seven basic cardioids from the formula: 


r = a(1 — cos(08)) 


A cardioid of order 1 is the basic heart shape. Increasing 0 increases 
the lobes in the pattern as shown in Figure 10.11. 
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10 MODE O 

20 FOR cardioid = 1 TO 7 

30 READ sx, sy, a, 0 

40 VDU 29,sx;sy; 

50 FOR theta = 0 TO 360 STEP 5 


60 r = ak(1-COSCRAD(Co*theta))) 
70 x = reCOSCRAD(theta)): y = r*SINCRAD(theta)d) 
80 IF theta = O THEN MOVE x, y ELSE DRAW x, y 


90 NEXT theta 
100 NEXT cardioid 


110 DATA 200, 800, 80, 1 
120 DATA 400, 800, 80, 2 
130 DATA 700, 800, 100, 3 
140 DATA 1000, 800, 100, 4 
150 DATA 200, 350, 100, 5 
160 DATA 600, 350, 100, 6 
170 DATA 1000,350, 100, 7 


Program 10.11 Basic cardioids. 


10 MODE 0 

20 VDU 29,640;512; 

30 FOR a = 100 TO 250 STEP 10 

40 FOR theta = 0 TO 360 STEP 5 

50 r = ax(1-COSC(RAD(5*theta))) 

60 x = reCOSCRAD(theta)): y = rxSINCRAD(theta)) 


70 IF theta = 0 THEN MOVE x, y ELSE DRAW x, y 
80 NEXT theta 
90 NEXT a 


Program 10.12 Concentric 5-lobe pattern. 


10 MODE O 

20 s = 0.1 

30 VDU 29,640;512; 

40 a = 100 

50 FOR i = 1 TO 8 

60 FOR theta = 0 TO 360 STEP 3 

70 r = ax(1-COSCRAD(5*theta))) 

x = sereCOSCRAD(theta)): y =r*SINCRAD(theta)) 
90 IF theta = 0 THEN MOVE x, y ELSE DRAW x, y 
100 s = s + 1/360 

110 NEXT theta 

120 NEXT i 


Program 10.13 5-lobe cardioids with x scale manipulation. 
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Figure 10.11 
Basic cardiods 


Figure 10.12 
‘Concentric’ 5-lobe pattern 


Figure 10.13 
5-lobe cardiods with x scale 
manipulation 
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10 MODE 0 

20 s = 0.1 

30 VDU 29,640;512; 

40 a = 100 

50 FOR i = 1 T0 8 

60 FOR theta = 0 TO 360 STEP 3 


70 r = ax(2-COSC(RAD(5*theta))) 
80 xX = serexCOSCRAD(theta)): y =r*SINCRAD(theta)) 
90 IF theta = 0 THEN MOVE x, y ELSE DRAW x, y 


100 s =s + 0.5/360 
110 NEXT theta 
120 NEXT i 


Program 10.14 Drawn-out 5-lobe cardioids with x scale manipulation. 


10 MODE 0 
20 s = 0.1 
30 VDU 29,640;512; 


0 
= 170 8 
60 FOR theta = O TO 360 STEP 3 
r = a*(1-COSC(RAD(3*theta))) 
x = 0.5*s*reCOS(RAD(theta)): y = s*rxSINCRAD(theta)) 
90 IF theta = 0 THEN MOVE x, y ELSE DRAW x, y 
s = s + 1/360 
110 NEXT theta 
120 NEXT i 


Program 10.15 3-lobe cardioids with x and y scale manipulation. 


10 MODE 0 
20 s = 0.1 
30 VDU 29,640;512; 


50 FOR i = 1 TO 8 
60 FOR theta = 0 TO 360 STEP 3 


70 r = ax(1-COSC(RAD(3*theta))) 
80 x = reCOSCRAD(theta)): y = s*r*xSINCRAD(theta)) 
90 IF theta = 0 THEN MOVE x, y ELSE DRAW x, y 


100 s = s + 1/360 
110 NEXT theta 
120 NEXT i 


Program 10.16 3-lobe cardioids with y scale manipulation. 
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Figure 10.14 
Drawn out 5-lobe cardiods 
with x scale manipulation 


Figure 10.15 
3-lobe cardiods with x and y 
scale manipulation 


Figure 10.16 
3-lobe cardiods with y scale 
manipulation 
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Program 10.12 takes the 5-lobe formula and varies the radius a. 

Program 10.13 is another variation on the 5-lobe formula. Here 
we scale x with a scaling factor that is a function of ‘theta’. As the 
lobes are drawn their ‘x-magnification’ is continually increased. 
This effect is best seen by watching the pattern build up. 

In Program 10.14 we have ‘drawn out’ the cardioid from the 
centre by adjusting r. The effect of this can be seen by comparing 
Figure 10.13 and Figure 10.14 — the centre of the pattern is drawn 
out. Programs 10.15, 10.16 and 10.17 apply similar manipulations to 
a 3-lobe pattern. Again this is best seen by watching the pattern 
build up. 


10 MODE 0 

20 s = 0.1 

30 VDU 29,640;512; 

40 a = 100 

50 FOR i = 1 TO 8 

60 FOR theta = 0 TO 360 STEP 3 


70 r = a*(2-COS(RAD(3*theta))) 
80 xX = reCOSCRAD(theta)): y = s*rxSINCRAD(theta)) 
90 IF theta = 0 THEN MOVE x, y ELSE DRAW x, y 


100 s = s + 0.5/360 
110 NEXT theta 
120 NEXT i 


Program 10.17 Drawn-out 3-lobe cardioids with y scale manipulation. 


10 MODE 0 

20 VDU 29,640;512; 

30 theta =Q:s=/7 

40 FOR square = 71 TO 15 

50 PROCdrawasquare 

60 RESTORE: theta = theta + 15 
65 s=s *.82 

70 NEXT square 

80 END 


90 DEF PROCdrawasquare 
100 FOR point = 1 TO 5 


110 READ x,y 
120 PROCrotate 
130 IF point = 1 THEN MOVE s*xt,s*yt ELSE DRAW s*xt,s*yt 


140 NEXT point 

150 DATA 50,-50,50,50,-50,50,-50,-50,50,-50 
160 ENDPROC 

170 DEF PROCrotate 

180 = xt = x*COSCRAD( theta) )-y*SINCRAD( theta) ) 


190 yt = x*SINCRAD (theta) )+y*COSCRAD( theta) ) 
200 ENDPROC 


Program 10.18 Squiral — rotating and shrinking squares. 


10.5 SQUIRALS 


Program 10.18 produces a spiral effect by rotating and shrinking 
squares. This pattern is used for three-dimensional ornamentation 
in an earlier chapter. It is a popular microcomputer pattern because 
it is striking and effective but easy to draw quickly. 

Program 10.19 is based on the same idea. This time a hexagon is 
used as the basic shape. 


10.6 THE USE OF COLOUR IN PATTERNS 


Another area worth exploration is the introduction of colour into 
these patterns. A number of schemes are possible. Firstly the ob- 
vious one: you can use different colours for the generating lines. 
Secondly you can colour fill closed regions using the algorithm 
introduced in Chapter 2. This is far less predictable and will greatly 
extend the interest and appeal of the pattern. Closed regions will 
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Figure 10.17 

Drawn out 3-lobe cardiods 
with both x and y scale 
manipulation 


Figure 10.18 
Squirals — rotating and 
shrinking squares 


399 


400 — Art of microcomputer graphics 


10 MODE 0 

20 VDU 29,640;512 
30 theta = 0:5 
40 FOR hex = 1 TO 
50 PROCdrawahex 
60 RESTORE: the 
65 s=s *.88 


70 NEXT hex 

80 END 

90 DEF PROCdrawah 
100 FOR point = 
110 READ x,y 
120 PROCrotate 
130 IF point = 


140 NEXT point 
150 DATA 43.3, 25, 

-43.3,-25, 
160 ENDPROC 


170 DEF PROCrotate 


=7 
15 


ta = theta + 15 


ex 
1 10 7 


1 THEN MOVE s*xt,sxyt ELSE DRAW s*xt,s*yt 


0,50, -43.3, 25, 
0,-50, 43.3,-25, 43.3,25 


180 xt = x*COSC(RAD(theta) )-y*SINCRAD( theta) ) 
190 yt = x*SINCRAD( theta) )+y*COSC(RAD( theta) ) 


200 ENDPROC 


Program 10.19 Rotating and shrinking hexagons. 


Figure 10.19 
Rotating and shrinking 
hexagons 


either occur as a consequence of the generated shape or they can be 
generated by overlapping two motifs — spirals, for example. The 
background should be coloured first so that a lot of time is not 
wasted by ‘bleeds’. The colour fill scheme can be manual: you use an 
interactive program and choose colours for particular regions. Alter- 
natively you can colour fill ‘automatically’. This can be done by 
writing a program that scans the screen in the following way: 
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10 MODE 1 

20 sx = 640: sy = 512 

30 INPUT "a,01,02",a,01,02 

40 VDU 29, sx;sy; 

50 vDU 19,3,4,0,0,0 

60 FOR theta = 0 TO 360 STEP O.1 

70 =x = -400*SINCRADCa*theta) )*COSCRAD(o1*theta) ) 
80—soy = 400*SINCRADCa*theta) )*SINCRAD(Co2*theta) ) 
90 IF theta = 0 THEN MOVE x,y ELSE DRAW x,y 
100 IF 10*theta MOD 10 = O THEN GCOL O,RND(3) 
110 NEXT theta 

120 END 


Program 10.20 Coloured Lissajous patterns. 


100 PROCcolourfillbackground 

110 FOR i = O TO 1239 STEP 4 

120 FOR j = 0 TO O TO 1023 STEP 4 

130 IF POINTCi1,j) <> backgroundcolour THEN 
GCOL 0, RND(C3) 
PROCcolourfill(i,j) 

140 NEXT j 

150 NEXT 7 


Thirdly the height of a two-dimensional function can be directly 


Inner circle rolls in this direction 


Position of ‘pen’ 


1, Y 


Figure 10.20 
Parameters used in cycloid 
generation 
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10 DIM sin¢1000) 

15 CLS : PRINT ''"Setting table of sines, WAIT..." 
20 FOR i = O TO 1000 

30 3 =sin(i) = SINCRADCi)) 

40 NEXT i 

50 MODE 1 

60 VDU 29,640;412; 

70 VDU 19,3,4,0,0,0 

80 GCOL 0,0 

90 vbU 19,0,6,0,0,0 

100 FOR x = -640 TO 640 STEP 4 

110 FOR y = -500 TO 620 STEP 4 

120 GCOL 0,ABSCINT(4.1*(FNsin(x) +FNsin(y*1.5)))) 
130 PLOT 69,x,y 


140 NEXT y 
150 GCOL 0, 0 
160 NEXT x 


170 DEF FNsin(t) =SGN(t)*sinCABS(t)) 
Program 10.21 A colour plot of a function of two variables. 


mapped into colour. This was done in Program 10.21 (see Colour 
Plate 27) which is just a colour plot of the function: 


f(x,y) = sin(x) + cos(x) 


This is a surface that has periodic humps and valleys. The height of 


Figure 10.21 (opposite) the surface at a point (x,y) is simply mapped into one of four colours. 


Cycloid patterns produced 
by varying parameters in 


PROCpattern: 

(a) 1,432,252,210,0,0; me CyEHOIDS: : 

(b) 1,384,252,224,0,0; In this final section we look at another powerful generator: cycloids. 
(c) 10,432,288,270,-24,0; Like the Lissajous generator this method generates an astonishing 
(d) 20,525,420,410,-20,7 variety of patterns. Some of the simpler patterns could be generated 


10 DIM sin(360) ,cos(360) 

20 FOR t=0 TO 90 

30 S=SINCRAD(t)) = c=COSCRAD(t)) 
40 sin(t)=s : sin(360-t)=-s 

50 =sin(180-t)=s : sin(180+t)=-s 

60 cos(t)=c : cos(360-t)=c 

70 =cos(180-t)=-c : cos(180+t)=-c 
80 NEXT t 


90 MODE O 
100 VOU 29,640;512; 
110 PROCpattern(2,525,420,410,-20,7) 


Program 10.22 A cycloid generator. 
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120 k=GET:MODE 7:END 


130 DEF PROCpattern(n,ri1,r2,r3,r3inc,thetainc) 
140 inc1=5:inc2=rt*inct/r2 
150 cr=r1-r2 


160 theta=0 

170 FOR i=1 TO n 

180 PROCcycloid(theta,r3) 

190 theta=thetatthetainc : r3=r3+r3inc 
200 =NEXT i 


210 ENDPROC 
220 DEF PROCcycloid(starttheta1,r3) 


continued 
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230 LOCAL theta1,theta2,theta3, cx,cy,xinc,yinc 


240 thetat=startthetal 


stheta2=0 


250 MOVE (crtr3)*cos(thetal) ,(cr+r3)*sin(thetal) 


260 REPEAT 

270 thetal=(theta1+inc1)M0D360 

280 cx=cr*cos(theta1) 

290 cy=crxsin(theta1) 

300 theta2=theta2tinc2 

310 IF theta2>thetal THEN theta2=theta2-360 


320 theta3=(theta1-theta2+0.5)M0D360 


330 xinc=r3xcos(theta3) 
340 yinc=r3*sin(theta3) 
350 DRAW cxtxinc,cytyinc 


360 UNTIL thetal=startthetal AND theta3=startthetat 


370 ENDPROC 


Program 10.22 continued 


using techniques already given but the the cycloid generator can 
produce complex circular patterns very easily (see Figure 10.21d, for 
example). 

A cycloid is the curve traced out by a point on a circle as it rolls 
along another curve. The simplest cycloids are obtained when a 
circle rolls along a straight line, but much more interesting effects 
can be obtained by using a more complex surface such as another 
circle. 

There are several well-known toys available that can be used to 
generate cycloids. These take the form of discs and other shapes 
with toothed edges. If one shape is pinned to the paper, a disc can be 
rolled along its edge and the teeth prevent slipping. A pen can be 
inserted in a hole in the moving disc and the path traced by the hole 
is marked out on the paper. 

Program 10.22 generates cycloids of the type produced when a 
disc is rolled around the interior of a larger circle. These tend to 
produce the most pleasing patterns. A single such cycloid is illustr- 
ated in Figure 10.21a. This was produced by a call of PROCpattern 
with n = 1, rl = 432, r2 = 252 and r3 = 210. The significance of the 
other parameters are not relevant in this case and will be explained 
shortly. Because n = 1, this results in a single call of PROCcycloid 
with startthetal = 0 and r3 unchanged. rl and r2 are the radii of the 
circle and r3 is the ‘pen radius’. The significance of the radii r1, r2 r3 
and the two angles thetal and theta2 used during plotting are 
illustrated in Figure 10.20. SIN and COS are very time consuming 
functions and before plotting starts the program initialises a table of 
values of SIN and COS for angles from 0° to 360°. The relative values 
of rl to r2 determine the number of ‘petals’ a cycloid will have, and 
the value of r3 how fat and how long the petals are. Figure 10.21b 
shows a single cycloid with more petals. 

Pleasing patterns can be obtained by superimposing several 
cycloids with different ‘r3’ values (Figure 10.21c) or different start- 
ing values for ‘thetal’ (Figure 10.21d). The first parameter (n) sup- 


plied to PROCpattern selects the number of cycloids to be 
superimposed and the last two parameters ‘r3inc’ and ‘angleinc’ 
determine the change in r3 and ‘starttheta1’ from one cycloid to the 
next. 

You can see that this generator rivals the Lissajous generator in 
variety and at the same time gives much greater control over the 
design of the pattern. 
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Appendix 1 Summary of 
mode and colour facilities 


TEXT FACILITIES AVAILABLE IN DIFFERENT MODES 


colours characters 
mode available per line lines 
0 2 80 32 
1 4 40 32 
2 16 20 32 
3 2 80 25 
4 2 40 32 
5 4 20 32 
6 2 40 25 
7 Teletext 40 25 

display 


GRAPHICS FACILITIES AVAILABLE IN DIFFERENT MODES 


colours graphics 
mode available resolution 
0 2 640 x 256 
1 4 320 x 256 
2 16 160 x 256 
4 2 320 X 256 
5 4 160 x 256 


Note that there are no graphics facilities in modes 3, 6 and 7. 


MEMORY REQUIREMENTS FOR DIFFERENT MODES 


memory 
mode requirements 


0 20K 
1 20K 
2 20K 
3 16K 
4 10K 
5 10K 
6 8K 


OVERALL COLOUR RANGE 


There are sixteen actual colours available. These colours are num- 
bered from 0 to 15. 
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Actual colour numbers and corresponding colours 


colour 
number colour name 
0 black 
1 red 
2 green 
3 yellow 
4 blue 
5 magenta 
6 cyan 
7 white 
8 flashing black-white 
9 flashing red-cyan 
10 flashing green-magenta 
11 flashing yellow-blue 
12 flashing blue-yellow 
13 flashing magenta-green 
14 flashing cyan-red 
15 flashing white-black 


COLOUR CODES IN DIFFERENT MODES 


In each mode colours are referred 


to by code numbers from 0 


upwards (using COLOUR for text colour and GCOL for graphics 
colour). The background colour is set by adding 128 to the required 
code number. The code numbers for a mode can be made to refer to 
any combination of actual colours (using VDU 19). There is an initial 
or default setting for each mode which specifies the colour that you 


get if you do not use VDU 19. 
2 colour mode (MODES 0,3,4,6) 


colour code numbers 


foreground background 
0 128 
1 129 


4 colour mode (MODES 1 and 5) 


colour code numbers 
foreground background 
0 128 

1 129 

2 130 

3 131 


default actual colours 


colour number 
black 0 

white 7 

default actual colours 
colour number 
black 0 

red 1 

yellow 3 

white 7 


In the 16 colour mode (MODE 2) the colour codes are initially set to 
the corresponding actual colour numbers. 
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Appendix 2 Bits, bytes and 
hex 


For the majority of straightforward programming applications, the 
user of this computer need not concern himself with the details of 
how things like numbers and strings are represented inside his 
computer, but for some advanced applications a more detailed 
knowledge of the internal representation of information is required. 


BITS 


All information stored in a modern digital computer is held in the 
form of ‘binary digits’. In this context, the word ‘binary’ means 
‘having two possible values’, and a binary digit can thus be set to 
one of two possible values. We usually abbreviate the term binary 
digit to ‘bit’. 

When we write a bit on paper, we represent its two possible 
values as 0 or 1. Inside a computer, a bit might be represented by a 
magnetic field lying in one of two possible directions, or by an 
electronic voltage that can be positive or negative. The programmer, 
however, need not concern himself with the practicalities of repre- 
senting a bit electronically or magnetically. When he needs to think 
in terms of the binary representation of information, he can think 
entirely in terms of ones and zeroes. 

With one bit, we can represent only two possible values, 0 or 1, 
and in fact some of the information in your microcomputer is coded 
using only one bit. For example, in MODE 4, one bit is used to code 
the colour of each pixel on the screen. Each pixel can be one of two 
colours, colour 0 or colour 1. 


Bit patterns 

Bits are usually organised into groups or ‘patterns’. With a group of 
two bits, each bit can be one of two values giving 2X2 possible 
different patterns. 


first second bit 
bit bit pattern 
0 0 00 
0 1 01 
7 0 10 
1 1 11 


A two-bit pattern is used to code the colour of each pixel on the 
screen in a four colour mode such as MODE 5. 


With three bits, there are 2X22 possible different patterns and 
so on: 


no. of bits no. of possible 

in pattern example _ different patterns 

1 0 2 

2 10 4=2x2 

3 011 8 = 2x2x2 

4 1010 16 = 2X2x2x2 

5 10100 32 = 2X2X2x2x2 

6 011010 64 = 2X2x2x2x2x2 

7 1101001 128 = 2X2xX2xX2xX2x2x2x 
8 11000101 256 = 2X2X2X2X2X2x2x2 


Bit numbering 
The bits in a bit pattern are usually referred to by numbering them 
from zero upwards from right to left, bit0, bit1, bit2 and so on. 


10131041 


bitS bit4 bit3 bit2 bitl bitd 


BYTES 


A group of 8 bits is called a ‘byte’. One ‘word’ on your microcompu- 
ter contains one byte or one 8-bit pattern. The entire store that is 
accessible to the user consists of 16,384 words or bytes on a BBC 
Model A and 32,768 words or bytes on a Model B or Electron. We 
usually quote storage capacity in ‘K’ where: 


1K = 1024 (1024 = 21°) 
Because we are working ona binary system, everything is organised 


behind the scenes in powers of 2. Thus we say that a Model A has 
16K bytes of store, i.e. 16*1024 bytes or 16*1024*8 bits. 


8-bit integers 

When we use a group of decimal digits to represent a non-negative 
integer, each digit has a weight that is a different power of 10. For 
example, with 5-digits: 


7392 4 


PN 


weight 10000 1000 100 10 1 
value 7*10000 +3*1000 +9*100 +2*10 +4*1 
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When we use a bit-pattern to represent a non-negative integer, only 
two values are available for each digit, so we give each digit a weight 
that is a power of 2. For example, with a 6-bit pattern we might have: 


Pea 


LO 


weight 2*2*2*2*2 2*2"2*2 2°22 =. 2*2 
=32 =16 =8 =4 


value 1°32. +0*16 «+1°8 +174 +0°2 +1*1 
= 45 in decimal 


When we use a full byte to represent an integer in this way, we have: 


binary decimal 
00000000 «= ~=éCOO 
00000001 = 1 
00000010 = 2 
00000011 = 3 
01111110 = 126 
01111111 = 127 
10000000 = 128 
11111110 = 254 
11111111 = 255 


We saw earlier that there are 256 different 8-bit patterns and they 
can be used in this way to represent integers in the range 0 to 255. 
Because it contributes least weight to an integer, the rightmost bit, 
bit, is usually called the least significant bit and the leftmost bit is 
called the most significant. 


8-bit positive and negative integers 

If we want to use bytes to represent both positive and negative 
integers, we have to define a different correspondence between the 
available bit-patterns and the values they represent. The represen- 
tation normally used is known as ‘2s complement’ representation. A 
detailed description of this is beyond the scope of this book, but the 
next table shows how a byte would be used to represent negative as 
well as positive integers. The bit-patterns that were previously used 
to represent positive integers from 128 up to 255 are now used in the 
same order as before to represent the negative integers from —128 up to 
-1. In particular, -1 is represented by a bit-pattern that consists 


entirely of ones. This representation for negative numbers may 
seem rather strange, but it has many advantages when the com- 
puter is doing calculations that involve positive and negative 
numbers. 


binary decimal 
10000000 = -128 
10000001 = 127 
10000010 = -126 
11111110 = 2 
1111111 = —-1 
ooo00000 «= ==~SCtié«<OD 
00000001 =~ «#41 
00000010 = #2 
01111110 = 126 
01111111 = 127 


Note that you cannot tell by looking at a bit-pattern what sort of 
information it is being used to represent. This is determined by the 
context in which it is used and by the way it is processed by the 
circuits of the computer. For example, the same bit pattern might be 
used in different contexts to represent an integer or a character code. 


HEXADECIMAL NOTATION 


When we are working with bit-patterns, it becomes very tedious 
having to write long sequences of ones and zeros when we want to 
specify a particular bit-pattern. We could abbreviate a byte by writ- 
ing it as the equivalent positive decimal number, such as 179, but it 
is not at all obvious if we write 179 that we are talking about the bit- 
pattern 10110011. When we want to abbreviate a bit-pattern in a way 
that is not too far removed from its binary form, it is usual to write it 
in ‘hexadecimal’ notation (or hex for short). The bit-pattern is first 
divided into groups of four bits. There are 16 possible different 
patterns of four bits and each of these possible patterns can be 
represented by a single ‘hexadecimal digit’ as follows: 


4-bit hexadecimal 4-bit hexadecimal 
pattern digit pattern digit 
0000 0 1000 8 


0001 1 1001 9 
0010 2 1010 A 
0011 3 1011 B 
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0100 4 1100 C 
0101 5 1101 D 
0110 6 1110 E 
0111 7 1111 F 
We can thus write the bit-pattern 10100011 in hex as A3: 
10100011 


rm 


In BASIC we can write numbers in a program in hex if we precede 
the number by the symbol ‘&’. Thus we write &B3. Here are some 
other examples of bytes and the corresponding hex and decimal 
numbers: 


byte hex decimal 
00011111 &1F 31 
00101110 &2E 46 
01101001 &69 105 
11111111 &FF 255 


Note that &69 is quite different from decimal 69 which would be 
represented by the bit-pattern: 


01000101 = &45 


Because one hexadecimal digit corresponds to four binary digits, it 
is easy to visualise the bit-pattern corresponding to a hexadecimal 
number (provided that we are familiar with the sixteen patterns that 
correspond to the sixteen hex digits). Thus, for example, &B7 is 
easily visualised as: 


&B7 


Foitoiit 


and &FA is easily visualised as: 
&FA 


rap 
11111010 


32-bit numbers 

A numeric variable in BASIC occupies four computer words which 
contain four bytes or 32 bits. A number stored in such a variable is 
coded as a pattern of 32 bits. The way in which a 32-bit pattern is 
used to represent positive and negative integers is a simple exten- 
sion of the 8-bit 2s complement representation introduced earlier. 
Note in particular that -1 is represented by a pattern of 32 ones. 
Details of how real numbers are coded as bit-patterns are beyond 
the scope of this book. 


LOGICAL OPERATIONS ON BIT-PATTERNS 


The various logical plotting modes selected by GCOL (Chapter 4) 
use logical operations on bit-patterns when plotting new informa- 


tion on the screen. For this reason alone, some knowledge of these 
operations is necessary. The logical operators AND, OR, EOR and 
NOT treat the values to which they are applied as bit-patterns and 
operate on the individual bits of these patterns. A detailed 
knowledge of how these operations work is occasionally useful in 
advanced programming applications. 

When a logical operation is applied to a bit-pattern or to a pair of 
bit-patterns, the individual bits are handled separately in creating 
the resultant bit-pattern. AND, OR and EOR are each applied to a 
pair of bit-patterns of the same length and the result is another bit- 
pattern of the same length. NOT is applied to a single bit-pattern 
and the result is another bit-pattern of the same length. We shall 
illustrate the behaviour of the logical operations on bytes, but they 
will behave in exactly the same way on shorter or longer bit- 
patterns. 


AND 


Each bit in the new pattern is the result of ‘anding’ the two bits in 
the same position in the two given bit-patterns according to the 
following table: 


bitl bit2 bitl AND bit2 

0 0 0 

0 1 0 

1 0 0 

1 | 1 

Thus, for example: 

bytel 10110100 
byte2 01100101 


bytel AND byte2 — 00100100 


OR 


Each bit in the new pattern is the result of ‘oring’ the two bits in 
the same position in the given bit-patterns according to the 
following table: 


bit] bit2 bit] OR bit2 

0 0 0 

0 1 1 

1 0 1 

1 1 1 

Thus, for example: 

bytel 10110100 
byte2 01100101 


bytel OR byte2 —-:1110101 
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EOR 


Each bit in the new pattern is the result of ‘exclusive oring’ the 
two bits in the same position in the given bit-patterns according 
to the following table: 


bit bit2 bitl EOR bit2 
0 0 0 
0 1 1 
1 0 1 
1 1 0 


The name of the operator derives from the fact that it ‘excludes’ 
the case where both bits to which it is applied are 1. Thus, for 
example: 


bytel 10110100 
byte2 01100101 


bytel EOR byte2 11010001 
NOT 


Each bit in the new bit-pattern is the result of ‘negating’ the same 
bit in the given bit-pattern. NOT produces the ‘logical inverse’ of 
the given bit-pattern by changing 0s to 1s and 1s to 0s. 


bit NOT bit 
0 1 
1 0 
Thus, for example: 
byte 10110100 
NOT byte 01001011 


Representation of TRUE and FALSE 

In BASIC the value TRUE is represented by a bit-pattern containing 
nothing but ones and FALSE is represented by a bit-pattern contain- 
ing nothing but zeros. When these values are stored in numeric 
variables, they look like the numeric values —1 and 0. 


Appendix 3 Characters, 
ASCII codes and control codes 


and Teletext codes 


ASCII CODES 


A character is stored inside the computer as an integer that occupies 
8 bits or one byte. There is an internationally agreed standard set of 
codes for the commonly used characters. These are the ASCII codes 
(American Standard Code for Information Interchange). The next 
table contains a list of the common visible characters together with 


their ASCII codes in decimal and hex. 


ASCII characters and their codes 


decimal hex 
code code 
32 &20 
33 &21 
34 &22 
35 &23 
36 &24 
37 &25 
&26 
39 &27 
&28 
41 &29 
&2A 
43 &2B 
&2C 
45 &2D 
46 &2E 
47 &2F 
48 &30 
49 &31 
50 &32 
51 &33 
52 &34 
53 &35 
54 &36 
55 &37 
56 &38 
57 &39 
58 &3A 
59 &3B 


char 


wen 


COMWNA TREWNK O™' 


wee 


decimal hex 
code code 
64 &40 
65 &41 
66 &42 
67 &43 
68 &44 
69 &45 
70 &46 
71 &47 
72 &48 
73 &49 
74 &4A 
75 &4B 
76 &4C 
77 &4D 
78 &4E 
79 &4F 
80 &50 
81 &51 
82 &52 
83 &53 
84 &54 
85 &55 
86 &56 
87 &57 
88 &58 
89 &59 
90 &5A 
91 &5B 


char 


NKXSSGCTYAODVOZZOAT“"LTOMMOOFP®O@ 


decimal hex 

code code 
96 &60 
97 &61 
98 &62 
99 &63 
100 &64 
101 &65 
102 &66 
103 &67 
104 &68 
105 &69 
106 &6A 
107 &6B 
108 &6C 
109 &6D 
110 &6E 
111 &6F 
112 &70 
113 &71 
114 &72 
115 &73 
116 &74 
117 &75 
118 &76 
119 &77 
120 &78 
121 &79 
122 &7A 
123 &7B 


char 


ANS x ge TFT OvS) sg Tro rao aa oP Mm 
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60 &3C < 92 &C \ 124 &7C | 
61 &3D = 93 &5D } 125 &7D } 
62 &3E > 94 &5E 126 &7E ~ 
63 &3F ? 95 &5F 


CONTROL CODES 


A number of the 256 available character codes are reserved for 
special purposes on your microcomputer. Sending one of these 
codes to the display hardware by using a PRINT ora VDU statement 
has a special effect. These codes are usually referred to as ‘VDU 
drivers’. Note that some of the codes must always be followed by a 
fixed number of additional codes or ‘parameters’. If these are omit- 
ted, the next few characters printed will be taken as the missing 
parameters. 


Summary of VDU codes 
decimal hex parameters effect 
0 0 O Does nothing 
1 1 1 Send a character to printer only 
2 2 0 Switch on printer output 
3 3 0 Switch off printer output 
4 4 0 Separate text and graphics cursors 
5 5 0 Join text and graphics cursors 
6 6 0 Enable VDU drivers 
7 7 0 Beep 
8 8 0 Move cursor back one space 
9 9 0 Move cursor forward one space 
10 &A 0 Move cursor down one line 
iT &B 0 Move cursor up one line 
12 &C 0 CLS (clear text screen) 
13 &D 0 Move cursor to start of current 
line 
14 &E 0 Page mode on 
15 &F 0 Page mode off 
16 &10 0 CLG (clear graphics screen) 
17 &11 1 COLOUR c 
18 &12 2 GCOL 1,c 
19 &13 5 New actual colour for colour 
number 
20 &14 0 Restore default actual numbers 
21 &15 0 Disable VDU drivers 
22 &16 1 MODE m 
23 &17 9 Create user-defined character 
shape 
24 &18 8 Define graphics window 
25 &19 5 PLOT k,x,y (2 bytes for x, 2 for y) 
26 &1A 0 Restore default windows 
27 &1B 0 Does nothing 
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28 &1C 4 Define text window 
29 &1D 4 Define graphics origin 
30 &1E 0 Move text cursor to top left 
31 &1F 2 TAB to x,y 
127 &7F 0 Backspace and delete 


These codes can also be sent from the keyboard by typing a CON- 
TROL character — hold down the CTRL key and type the character. 
For example, codes 1 to 26 correspond to CONTROL-A to CON- 
TROL-Z. 


TELETEXT CONTROL CODES 


In Teletext mode (MODE 7), a number of special effects can be 
switched on and off by displaying special control codes. Remember 
that one of these control codes appears as a space on the screen and 
that its effect lasts only for the current screen line. 


Teletext control codes for Mode 7 


code controls effect 

129 colour text characters in red 

130 colour text characters in green 

131 colour text characters in yellow 

132 colour text characters in blue 

133 colour text characters in magenta 

134 colour text characters in cyan 

135 colour text characters in white 

136 flash set flashing on current line 

137 flash clear flashing on current line 
140 char. ht. single height characters 

141 char. ht. double height characters 

145 graphics graphics characters in red 

146 graphics graphics characters in green 

147 graphics graphics characters in yellow 
148 graphics graphics characters in blue 

149 graphics graphics characters in magenta 
150 graphics graphics characters in cyan 

151 graphics graphics characters in white 

152 special supress display (hide) 

153 special normal graphics (not separated) 
154 special separated graphics 

156 colour reset background colour to black 
157 colour background colour = _— current 


foreground 
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TELETEXT GRAPHICS CHARACTERS 


The Teletext (MODE 7) graphics characters consist of 2;3 patterns of 
foreground and background colour. There are two numeric codes 
for each of the graphics character shapes. After a line of text has 
been switched to graphics mode by one of the graphics codes in the 
previous table, the ASCII characters with codes 32 to 63 and 95 to 126 
are displayed as graphics characters. (The codes from 64 to 94 are 
displayed as normal ASCII characters, i.e. numeric digits and capi- 
tal letters.) 

These ASCII codes provide a convenient way of printing a string 
of graphics characters. A PRINT statement in a program can contain 
a string of the corresponding ASCII characters, and, providing an 
appropriate code precedes them on the output line, they will be 
displayed as graphics characters. 

The graphics shapes that replace the normal ASCII characters are 
given in the next table. Note that there is no lower code for a solid 
block of foreground colour. 


Graphics characters that replace the normal ASCII characters 
decimal hex ASCII graphics decimal hex ASCII — graphics 


code code char. char. code code char. char. 
32 &20 space 95 &5F _ Be 
33 &21 ! 23 96 &60 e@ m 
34 &22 =" A 97 &61 a ee 
35 &23 # 98 &62 b te 
36 &24 $ g 99 &63 | 
37 &25 % & 100 &64 d S| 
38 &26 & q 101 &65 e q 
39 &27 ' B 102 &66 f aq 
40 &28 ( & 103 &67 g .* 
41 &29 ~) a 104 &68 h | 

&2A * a 105 &69 i al 
43 &2B + A 106 &6A j | 

&2C | 107 &6B k | 
45 &2D - | 108 &6C 1 aj 
46 &2E . | 109 &6D m | 
47 &2F / a 110 &6E n a 
48 &30 0 & 111 &6F o | 
49 &31 1 & 112 &70 p g 
50 &32 2 a 113 &71 q a 
51 &33 3 8 114 &72 + g 
52 &34 4 E 115 &73 5s g 
53 &35 5 E 116 &74 ¢ g 
54 &36 6 Z 117 &75 ou E 
55 &37 7 £ 118 &76 Vv Fs 
56 &38 8 a 119 &77 ow r 
57 &39 9 5 120 &78 x a 
58 &3A : | 121 &79 y 5 
59 &3B ; , 122 &7A z a 


60 &3C < BE 123 &7B { a 
61 &3D = E 124 &7C 1 a 
62 &3E > a 125 &7D } i 
63 &3F ? a 126 &7E ~ a 


The other codes for graphics characters are 160 to 191 and 224 to 
255. To print graphics characters using these codes, the VDU state- 
ment can be used, or CHR$ can be used to construct a string 
containing graphics codes. The advantage of these higher codes is 
that the order in which the codes correspond to the graphics shapes 
is more systematic. A program (or programmer) can more easily 
calculate a code for a given shape. We label the six cells in a graphics 
character as follows: 


i [i] 
ie [bi 


These numberings correspond to the bits in the one byte character 
code as follows: 


10100000 


//11\\\\ 


bit7 bit6 bitS bit4 bit3 bit2 bitl bitd 


In the higher codes for graphics characters, bit5 and bit7 are always 
set to 1. The remaining bits are set to 1 for foreground colour and to 0 
for background colour in the corresponding cell. Thus, given the bit 
values that specify a shape, the code for the required character can 
be calculated by 


bitO + bitl*2 + bit2*4 + bit3*8 + bit4*16 + bit6*64 + 32 + 128 


There is no such simple expression for calculating the lower codes. 
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Appendix 4 Matrix notation 
and multiplication 


In Chapter 3 we have made use of matrix notation in linear 
transforms. We say that a point (x,y) transforms to a point (xt,yt): 


xt = ax + by 
yt = cx + dy 


Given that all our transformations are of this form we can say that 
the transform T can be represented by the matrix: 


ac 

bd 
Now using matrix notation to represent the above operation we 
rewrite the equations in the form: 


(xt, yt) = (x,y) |a oc 
ad 


On the right hand side we are multiplying a row matrix (represent- 
ing a single point in two-dimensional space) by a 2X2 matrix. The 
equation specified in the matrix notation is identical in every respect 
to the non-matrix form of the equation. To obtain xt from the matrix 
form we multiply the row matrix (x,y) by the first column: 


xt=(x,y)}a@ . 
b. 


= ax + by 


and to obtain yt from the matrix form we multiply the row vector by 
the second column: 


yt = (x, y) E 4] 
. a 


=cx + dy 


The other context in which we used matrix multiplication was to 
concatenate transforms together. 


T = TI*T2 


(ae + cf) (ag + ch) 
(be + df) (bg + dh) 


4 
—i 
aU 
yey 


p is formed by taking the sum of the products of the entries in the 
first row of T1 with the first column in T2. g is formed by taking the 
sum of the products of the entries in the second row in T1 with the 
first column in T2. Inspecting the other two entries r and s will show 
how these are similarly derived. In the general case: 


C = A*B 
each entry C; of the product is the sum of the products of the entries 
of the ith row of A with the corresponding entries of the jth column 
of B. We could easily write a procedure to multiply two 3x3 matrices 


together and this follows. In Chapters 3 and 8 we multiplied 
matrices together manually. 


100 DEF PROCmatmult 
110 FOR 1 = 170 3 


120 FOR j = 1 TO 3 
130 INPUT ACi,j) 
140 NEXT j 

150 NEXT i 

160 FOR i = 1 TO 3 

170 FOR j = 1 T0 3 
180 INPUT BCi,j) 
190 NEXT 7 

200 NEXT j 

210 FOR i = 1 TO 3 

220 FOR j = 1 TO 3 
230 sum = 0 

240 FOR k = 1 TO 3 
250 sum = sum + ACi,k)*B(k,j) 
260 NEXT k 

270 CCi,j) = sum 

280 NEXT j 

290 NEXT i 


300 ENDPROC 


Here we have used the usual convention when handling matrices — 
the first subscript is the row number, the second subscript is the 
column number (not to be confused with the convention for han- 
dling screen coordinates). Note that each matrix must be typed in 
row-wise. 
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Appendix 5 The viewing 
transformation 


The viewing transformation, V, transforms points in the world 
coordinate system into the eye coordinate system: 


(x., Ye, Zer 1) = (x, We we 1) V 


Viewpoint 


A viewpoint is given as a set of three coordinates specifying the 
viewpoint in the world coordinate system. An object described in 
the world coordinate system is viewed from this point along a 
certain direction. In the eye coordinate system, the z-axis points 
towards the world system origin and the x-axis is parallel to the x-y 
plane of the world system. It is standard to adopt a left-handed 
convention for the eye coordinate system. In the eye coordinate 
system the x and y-axes match the axes of the display system and the 
z, direction is away from the viewpoint (into the display screen). 
World coordinates are normally right handed systems so that in the 
computation of a net transformation matrix for the viewing transfor- 
mation we would include a conversion to a left-handed system. 
We can now specify the net transformation matrix as a series of 
translations and rotations that take us from the world coordinate 
system into the eye coordinate system, given a particular viewpoint. 


These steps will be given as separate transformation matrices and 
the net transformation matrix resulting from the product will simply 
be stated. If you are unhappy with the derivation you can of course 
skip it and accept the final result — the net transformation matrix 
required for a viewing transformation. 

Now the viewing transformation is best specified using spherical 
instead of cartesian coordinates. We specify a viewpoint in spherical 
coordinates by giving a distance from the origin p and two angles (0 
and 9). 


Spherical 
coordinates 


® P (0,0,4) 


These are related to the viewpoint’s cartesian coordinates as 
follows: 


Tx = p sin } cos 8 
Ty = psin @ sin 0 
Tz = pcos 


Another fact we require in this derivation is that to change the origin 
of a system from (0, 0, 0, 1) to (Tx, Ty, Tz, 1) we use the 
transformation: 


1 0 0 0 
0 1 0 0 
0 0 1 0 
-Tx -Ty -Tz 1 


Note that this is the inverse of the transformation that would take a 
point from (0, 0, 0, 1) to (Tx, Ty, Tz, 1). 

The four transformations required to take the object from a world 
coordinate system into an eye coordinate system are: 


(1) Translate the world coordinate system to (Tx, Ty, Tz), the 
position of the viewpoint. All three axes remain parallel to their 
counterparts in the world system. 
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The cube in the diagram is not an object that is being 
transformed, but is intended to enhance an interpretation of 
the axes. Using spherical coordinate values for Tx, Ty, and Tz 
the transformation is: 


Tl = 1 0 0 0 
0 1 0 0 

0 0 1 0 
-pcos@sing -psin@sing -pcos®d 1 


(2) The next step is to rotate the coordinate system through (90° - 8) 
in a clockwise direction about the z’-axis. The rotation matrices 
defined in Chapter 8 were for counter-clockwise rotation rela- 
tive to a coordinate system. The transformation matrix for a 
clockwise rotation of the coordinate system is the same as that 
for a counter-clockwise rotation of a point relative to the coordi- 
nate system. The x’’-axis is now normal to the plane containing 
p. 


T2=] sin@ cos6 0 0 
-cos@ sind 0 0 

0 0 10 

0 0 o1 


(3) The next step is to rotate the coordinate system (180° - 9) 
counter-clockwise about the x’-axis. This makes the z’’’-axis 
pass through the origin of the world coordinate system. 


T3 = 


0 0 0 
-cosg -singd 0 
sing -cosd 0 

0 0 1 


ooor 


T4=/-1 0 00 
0100 
0010 
0001 


Multiplying these together gives the net transformation matrix 
required for the viewing transformation. 


V = T1*T2*T3*T4 = |-sin@ -cos@8cos -cos 8 sing 0 
cos@ -sin@cos@ -sin@singd 0 

0 sin d -cosmd 0 

0 0 p 1 


where 


[Xe Yo Ze 1} = [Xw Yw Zw IV 
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actual colours, 39 
Alhambra, 198 
anamorphic art, 124 
AND, 413 
animation, 47 
arcade games, 1 
ASCII codes, 415 


background plane, 61 
band groups, 130 

group 1, 138 

group 2, 139 

group 3, 141 

group 4, 144 

group 5, 145 

group 6, 147 

group 7, 149 
bar chart, three-dimensional, 295 
bits, 408 
bit patterns, 408 
bit planes, 43 
bouncing ball, 43 
Brownian motion, 274 
buzzing bee, 49 
bytes, 409 


CAD, 65 
Cairo tile, 196 
calligraphy, 1 

calligraphic facility, 1 
cardiod patterns, see patterns 
C-curves, 266 
circles, 384 


circular functions, 382 
CLG, 34 
CLS, 34 
clock, 64 
coastlines, 261, 272 
colour, 
actual, 39 
logical, 38 
use of in mathematical patterns, 
399 
colour mixtures, 86 
colour painting, 78 
composite image with priority, 49 
computer aided design, see CAD 
concatenating transformations, 114- 
115 
control codes, 14, 416 
culling, 351 
cycloids, 402 
cylindrical transformations, 340 


data structure, three-dimensional 
solids, 289 
decorative techniques, 330 
linear, 331 
non-linear, 339 
depth buffer algorithm, 350 
depth sort algorithm, 355 
program implementation, 364 
deterministic loops, 11 
DRAW, 6, 9 


ellipses, 384 
EOR, 414 
Escher, 197, 209 
EVAL, 23 
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eye coordinates, 286, 323, 422 


FIFO queue, 79 
FOR statements, 11 
nested, 12 
foreground plane, 49, 61 
fractals, 241, 261 
fractal map, 276 
fractal variations, 272 
frame buffer, 3 
frieze groups, 130 
functions, 
harmonic, 382 
of a single variable, 23 
periodic, 383 


GCOL, 36 
applications, 38 
global variables, 18 
generalised two-dimensional trans- 

formations, 112 
graphics, 
editor, 301 
input devices, 96 
legendry, 21 
tablets, 97 
window, 27 


Haeckel, Ernst, 132 
harmonic functions, 382 
hexadecimal notation, 411 
hidden surface removal, 349 
back surface elimination, 351 
depth sort, 355 
minimax test, 361 
overlap test, 361 
painting, 294, 297 
homogeneous coordinates, 107 
horizontal fill, 81 


identity, 105 
IF THEN statements, 20 
images, 
hierarchy, 14 
multiple, 42 
planes switching, 43 
switching, 42 
integers, representation of, 409 
interaction techniques, 65 
interactive painting, 83 


Jones, Owen, 131 
joysticks, 101 


Koch flakes, 255 


light pens, 101 

Lissajous patterns, see patterns, 

lofting, 301 

logical colours, 38 

logical operations, 412-413 
plotting, 36 


magnification, 313 
maps, fractal variations, 276 
mathematical shapes, 382 
matrix notation, 102 
menu selection, 20, 419 
Mercator projection, 342 
midground plane, 49, 61 
minimax test, 361 
MODE, 4, 8 
modulation, 383, 386 

of radius, 383 
monitor resolution, 5 
MOVE, 6, 9 
multiple graphs, 26 
multiple images, 42 
multi-object scenes, 330 
mutual recursion, 266 


natural patterns, see patterns 
nested FOR statements, 12 
nested procedures, 14 
net transformation matrix, 112 
two-dimensional, 113 
three-dimensional, 315 
network groups, 154-194 
group 1, 154 
groups 2-3, 155 
groups 4-6, 156 
groups 7-9, 157 
groups 10-11, 158 
groups 12-14, 159 
groups 15-17, 194 
network patterns, 150 
non-deterministic loop, 12 
non-periodic tesselations, see tessela- 
tions, 
NOT, 414 


OR, 413 
origin translation, 21, 26 
overlap test, 361 


palette, 
changing of, 38 
extensions of, 94 


painting, 78 
interactive, 83 
hidden surface removal, 294, 297 
panning, 30 
parameters, 18 
patchwork, 198 
patterns, 241 
cardiod, 392 
Lissajous, 388 
mathematical, 399 
network, 150 
Penrose kites and darts, 207 
periodic functions, 383 
periodic tesselations, see tesselations, 
perspective transformation, 285, 287 
322, 328 
picking and dragging, 73 
tesselations, 199 
ixels, 3 
PLOT, 8, 9, 10 
PLOT 77, 83 
PLOT 92, 83 
priority, in images, 49 
procedures, 14 
with parameters, 18 
program structures, 11 
pseudo three-dimensional 
techniques, 291 
bar chart, 295 
spheres, 294 


random trees, 279 
raster displays, 1 
taster-ops, 36 
raster scan displays, 3 
rearground plane, 61 
recursion, 241 

colour fill, 250 

flood fill, 250 

how it works, 246 

mutual, 266 

problems with, 250 

reptiles, 257 

shapes, 254 

squares, 254 

trees, 279 
reflection, 105 
refresh buffer memory, 3 
regular polygons, 196 
relative coordinates, 9 
relative plotting, 9 
repeating transformations, 115 
REPEAT UNTIL, 12 
reptiles, 206, 257 


rotation, 105, 313 
rotational sweeping, cylinder, 305 
rubberbanding, 69 


saving a line drawing, 77 
scaling, 105, 313 
screen coordinates, 7, 287, 316 
screen memory, 3 
organisation of, 3-4 
shading surfaces, 348 
shear, 105, 106 
Shubnikov, 130 
Sierpinski curves, 263 
sine wave function, 23 
sine waves, 383 
modulation of, 383 
random, 279 
recursive, 279 
triangular fill, 116, 227 
triangulation, 302 
algorithm, 302 
triominoes, 207, 258 
TRUE, 414 
snowflakes, 255 
space filling curves, 261 
spatial resolution, 4 
spherical coordinates, 323 
spherical transformations, 342 
sphinx, 207, 259 
spirals, 387 
squirals, 399 
stereo effects, 342 
stippling, 86 
structured programming, 11 
subproblems, 241 
super pixelling, 86 
surface shading, 348 
symmetry, 
axis of, 132 
of bands, 138 
of single motifs, 131 
plane of, 131 
rotational, 132 


teletext, 417 

tesselations, 196 
accurate alignment, 202 
colour fill, 199, 227 
decoration, 227 
deformations, 209 
Escher, 209 
non-periodic, 204 
Penrose, 207 
periodic, 204 
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scaling, 313 
translation, 314 
viewing, 285, 322 
world to eye coordinates, 323 
world to screen coordinates, 316 
see also net transformation matrix 
transformation, two-dimensional, 
generalised, 112 
identity, 105 
linear, 102 
reflection, 105, 111 
rotation, 105, 111 
scaling, 105, 111 
shear, 105, 111 
translation, 111 
non-linear, 118 
translation, 107 
trees, 
reptiles, 206 
sphinx, 207 
tile orientations, 234 
triomino, 207 
texture patterns, 93 
text window, 27, 34 
Thompson, D’arcy, 120 
three dimensional solids, 
data structure, 289 
data input, 299 
lofting, 301 
triangulation, 302 
transformation, three dimensional, 


linear, 312 
magnification, 313 
non-linear, 339 
cylindrical, 340 
decorative techniques, 339 
spherical, 342 
perspective, 285, 322, 328 
rotation, 313 


variables, global, 118 

VDU 5, 22, 38 

VDU 19, 40 

VDU 24, 28 

VDU 28, 34 

VDU 29, 22, 137 

video look-up table, 40 

viewing transformation, 285, 322, 422 
viewpoint, 286, 321, 422 

viewports, 29 


wallpaper groups, 130 
W-curves, 266 
window, 


graphics, 27 
text, 27, 34 

wire frame model, 285 

world coordinates, 316, 422 
world coordinate system, 286 


zooming, 30 
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